在angular中创建自定义输入指令

17 浏览
0 Comments

在angular中创建自定义输入指令

我想创建一个自定义输入框，看起来像这样：

my-input应该接收任何常规输入框可以接收的属性（如placeholder等）。

输出应该像这样（myInputTemplate.html）：

    {{title}}

我创建了一个指令：

myApp.directive('myInput', function(){
     return {
        restrict: 'E',
        require: 'ngModel',
        templateUrl: '/myInput/myInputTemplate.html',
        replace: true,
        scope: {
            text: '=ngModel',
            title: '=title'
        },            
    }

});

ng-model现在已经绑定好了，

我的问题是：

我如何将属性（如placeholder等）从my-input传递到内部的输入框中？

我觉得我方法可能有问题，也许我需要这样做：

并将输入框包装在：

 
    {{title}}  
    <这里将是原始输入框>

0

3 答案

0 Comments

问题的原因是Plunker无法识别insertBefore和appendTo方法。

解决方法是在代码中使用angular.element方法来创建元素，并使用insertAfter和append方法来插入元素。

第二种方法成功了！最终代码如下：

指令代码如下：

app.directive('myInput', function () {
    return {
        restrict: 'A',
        scope: {
            title: '=title'
        },
        link: function ($scope, $element) {
            var wrap = angular.element('
');
            $element.addClass('form-control').removeAttr('my-input');
            wrap.insertAfter($element);
            $element.appendTo(wrap);
            if ($scope.title) {
                var title = angular.element('' + $scope.title + '');
                title.appendTo(wrap);
            }
        },
    }
});

我甚至为此创建了我的第一个Plunker，不幸的是，Plunker无法识别insertBefore和appendTo方法。

解决方法是在代码中使用angular.element方法来创建元素，并使用insertAfter和append方法来插入元素。

你可以点击以下链接查看Plunker示例：http://plnkr.co/edit/XnFM75vOBg4ifHUQzGOt?p=preview

0
0 Comments

问题的原因是，用户想要在Angular中创建一个自定义的输入指令，该指令可以接收任意属性并将其应用到input元素上。

解决方法是使用ng-attr指令来实现。用户可以在HTML中使用ng-attr-placeholder来动态设置输入框的placeholder属性。同时，在指令的作用域中使用placeholder属性来接收传入的属性。

具体的解决方法如下所示：




scope: {
  text: '=ngModel',
  title: '=title',
  placeholder : '=placeholder'
}

用户可以通过给指令传递属性来动态设置输入框的任意属性。这样就实现了一个可以接收任意属性的自定义输入指令。

用户可以阅读关于ng-attr-attrName的文档以及一个有用的解答来深入了解动态属性的使用方法。

用户还可以查看相关问题和答案，了解如何将属性数组传递给指令，以及如何使用不同的方式来提问相同的问题。

通过以上解决方法，用户可以在Angular中创建一个通用的自定义输入指令，可以接收任意属性并将其应用到input元素上。

0
0 Comments

问题的出现原因是在使用自定义指令时，如果没有正确传递参数，将无法获取到预期的结果。解决方法是在指令中使用scope属性来绑定参数。

在指令调用中，需要使用ng-model、placeholder和title这些参数，并且需要用引号（'）将参数值包裹起来，以示这些值是字符串。这样做可以避免Angular去查找scope变量。

指令中需要设置scope属性，来绑定参数值。例如：text: '=ngModel'表示将ng-model的值绑定到text变量上。

模板中可以使用双括号语法{{}}来显示参数的值。例如：{{title}}将显示title参数的值。

如果想要让指令更加通用，可以在指令中添加其他属性。只需要在scope中添加对应的属性即可。

关于问题中提到的第二种方法，区别在于是否创建一个新的输入框。第一种方法是在指令中创建新的输入框，而第二种方法是将原始输入框包裹在指令的外部。

以上就是解决这个问题的方法，你可以在这里查看演示。

0