Question

我需要创建自定义指令

<my-input id="myInputElementId1"
          label="My Label 1"
          ng-model="myInputElementModel1"
          ng-change="resetFormFieldErrors(form.myInputElementId1)"
          ng-required="true"></my-input>

应该像以下一样工作：

<div>
    <label for="myInputElementId1"><span>My Label 1</span></label>
    <input id="myInputElementId1"
           name="myInputElementId1"
           type="text"
           ng-model="myInputElementModel1"
           ng-change="resetFormFieldErrors(form.myInputElementId1)"
           ng-required="true"/>
</div>

myInput.directive.js 代码如下：

"use strict";

module.exports =
    function myInput() {
        return {
            require: "ngModel",
            scope: {
                model: "=ngModel",
                id: "@",
                label: "@",
                required: "@?"
            },
            link: function (scope, element, attrs) {
                scope.$watch("model", function (newValue, oldValue) {
                    if (newValue != oldValue) {
                        if (attrs.ngChange) {
                            console.log("Should execute: " + attrs.ngChange);
                            scope.$eval(attrs.ngChange);
                        }
                    }
                });
            },
            templateUrl: "app/campaign/templates/search/myInput.html"
        };
    };

myInput.html 代码如下：

<div>
    <label for="{{id}}"><span>{{label}}</span></label>
    <input id="{{id}}" name="{{id}}" type="text" ng-model="model" ng-required="required"/>
</div>

新指令用法的示例如下：

<my-input id="myInputElement1"
          label="My Label 1" ng-model="myInputElement1"
          ng-change="resetFormFieldErrors(form.myInputElement1)"></my-input>

<my-input id="myInputElement2"
          label="My Label 2"
          ng-model="myInputElement2" ng-change="resetFormFieldErrors(form.myInputElement2)"></my-input>

<my-input id="myInputElement3"
          label="My Label 3"
          ng-model="myInputElement3" ng-change="resetFormFieldErrors(form.myInputElement3)"></my-input>

每当我更改输入元素的文本 console.log（＆＃34;应执行：＆＃34; + attrs.ngChange）工作正常，但范围。$ eval （attrs.ngChange）不起作用，并且不存在执行错误。

有人请帮助我。

Answer 1

我相信您需要在父作用域上调用$eval，所以类似于scope.$parent.$eval();

这是必要的，因为指令中的scope创建了一个独立的范围，但attrs.ngChange引用了父范围。

Answer 2

不确定你打算使用范围到底是什么意思。$ eval，相反，我建议你采用以下方式，这是根据你的上述要求做的最合适的方法。

module.exports =
    function myInput() {
        return {
            require: "ngModel",
            scope: {
                model: "=ngModel",
                id: "@",
                label: "@",
                required: "@?",
                methodChange: '&?'
             }
             controller: ['$scope', function($scope) {
               $scope.$watch('model', function (newValue, oldValue) {
                  if (newValue != oldValue) {
                     if ($scope.methodChange) {
                        $scope.methodChange();
                     }
                  }
               });
             }]
            },
            templateUrl: "app/campaign/templates/search/myInput.html"
        };
    };

并使用指令模板中的方法更改替换ng-change

范围。$ eval在custom指令的link函数内不起作用

2 个答案: