Question

我正在学习Angular，并希望尝试在我的项目中制作一个简单的指令。

它基本上只是一个输入，周围有一些标记和一些样式。

文本input.html：

<div class="form-group row">
<label class="col-sm-2 form-control-label">{{label}}</label>
<div class="col-sm-10">
    <input name="{{input}}" class="form-control" type="text" placeholder="{{placeholder}}"/>
</div>

我正在使用它

<text-input ng-model="newBookCtrl.bookConfig.title" label="Title" input="title" model="newBookCtrl.bookConfig.title" placeholder="Title"></text-input>
<text-input ng-model="newBookCtrl.bookConfig.modOrigin" label="Module Origin" input="modOrigin" model="newBookCtrl.bookConfig.modOrigin" placeholder="e.g. http://blah.org"></text-input>

newBookCtrl是一个只有一个名为bookConfig的JavaScript对象的控制器。

文本输入指令：

    app.directive("textInput", function(){
    return {
        require: 'ngModel',
        scope: {
            label: "@",
            input: "@",
            placeholder: "@",
        },
        templateUrl: "/static/book_config/html/text-input.html",
        link: function(scope, iElement, iAttrs, ngModelController){
            var input = iElement.find("input")
            ngModelController.$render = function(){
                input.val(ngModelController.$viewValue);
            };
            scope.$watch(function(){return input.val();}, function(newVal, oldVal){
                if (newVal !== oldVal){
                    ngModelController.$setViewValue(input.val());
                }
            });
        }
    };
});

所以，当您按 Enter 时，bookConfig模型对象才会更新。但是，我想在文本框中的值更改时更新模型，而不需要按 Enter 。

有什么建议吗？

Answer 1

您可以通过创建与实际模型的双向绑定来完成此操作。而且您不需要使用$ render和$ watch在链接函数中执行您正在执行的操作。在你的指令中试试这个

 scope: {
        label: "@",
        input: "@",
        placeholder: "@",
        ngModel:"="
    },

这在模板中

   <div class="col-sm-10">
    <input ng-model="ngModel" name="{{input}}" class="form-control" type="text" placeholder="{{placeholder}}"/>
  </div>

将模型作为用户类型更改为自定义Angular指令

1 个答案: