Question

我正在创建一个简单的指令，为input字段添加一个清除按钮。

angular.module('module').directive('strClearable', ($compile) => ({
        restrict: 'A',
        require: 'ngModel',
        link: (scope, el, attrs, ngModel) => {
            const template = $compile('<span ng-click="reset()">&times</span>')(scope);
            el.after(template);

            scope.reset = () => {
                ngModel.$setViewValue('test');
                ngModel.$render();
            };
        },
    })
);

<input type="text" ng-model="something" str-clearable>

只要每页只使用一次，它就可以完美运行。如果有多个input，每个都应用了指令，则清除将不再正常工作。它总是只清除页面的最后input。这似乎是由每次将指令应用于scope.reset字段时覆盖的input方法引起的。因此，ngModel将始终指向最后的input模型。

如何在不添加隔离范围的情况下重写指令以适用于每个input？

Answer 1

你可以这样做：

angular.module('module').directive('strClearable', () => ({
        restrict: 'A',
        require: 'ngModel',
        link: (scope, el, attrs, ngModel) => {
            var btn = angular.element('<span>&times</span>');
            el.after(btn);

            btn.on('click', function() {
              ngModel.$setViewValue('');
              ngModel.$render();
              el[0].focus();
            });

        },
    })
);

Angular中具有非隔离范围和事件处理程序的指令

1 个答案: