Question

我创建了一个指示，除了文本框之外还显示 X ，用于清除文本框内的数据，

指令JS

angular.module(appName).directive('clrTxt', function () {
    return {
        restrict: 'E',
        replace: true,
        scope: {
            cntrlas: '=',
            mdlval: '='
        },
        link: function (scope, elem, attrs, ctrl) {
            scope.cleartxt = function () {
                scope.cntrlas[scope.mdlval] = '';
            }
        },
        template: '<button class="close-icon" type="reset" id="closeicon" ng-click="cleartxt()" ><img src="/resources/img/quote-tool-close.png" class="clear-icon"></button>'
    };
});

HTML

<input type="text" ng-model="item.epinNumber" ng-change="numberLengthCheck(item)" >
<clr-txt cntrlas="item" mdlval="'epinNumber'"></clr-txt>

这将在文本框的末尾创建一个 X 图标，并在您点击它时清除数据。

问题是，我触发了一个功能on-change，所以当点击 X 图标时，数据将被清除，理想情况下也是如此。应该触发更改事件。但由于某些原因，使用 X 指令清除数据时不会触发更改事件。

Answer 1

关键是设置bindToController和controllerAs别名。然后您可以访问指令链接功能中的控制器功能。

angular.module('plunker', []);

function MainCtrl($scope) {
  $scope.name = 'Test';
   $scope.numberLengthCheck = function(n){
        alert('change triggered '+ n);
   };
}


angular.module('plunker').directive('clrTxt', function(){

  return {        
    restrict: 'E',
    controller: 'MainCtrl',
    controllerAs: 'vm',
    bindToController: true,
    scope: {
            cntrlas: '='
    },

    templateUrl: 'reverse_template.html',
    replace: true,
    link: function(scope, elem, attr, ctrls) {
      scope.cleartxt = function () {
            scope.cntrlas = '';
            scope.numberLengthCheck(scope.cntrlas);
      }
    }
  };
});

Answer 2

在 ng-change 中，当值更改来自模型时，不会计算表达式。如果你想听模型 $ watch 是有用的

在这里，我认为不需要向clrTxt指令发送额外的属性（cntrlas，mdlval）。您可以通过创建默认的scope:false来访问指令中的父作用域。

指令JS

app.directive('clrTxt', function () {
    return {
        restrict: 'E',
        replace: true,
       template: '<button type="reset" ng-click="cleartxt()" >X</button>',
        link: function (scope, elem, attrs, ctrl) {
            scope.cleartxt = function () {
                scope.item.epinNumber = '';
            }
        }
    };
});

Controller JS

app.controller('MainCtrl', function($scope) {

  $scope.$watch('item.epinNumber', function(newvalue,oldvalue) {
        console.log('new value is ='+newvalue+ ' and old value is ='+oldvalue);
    });
});

HTML

<body ng-controller="MainCtrl">
    <input type="text" ng-model="item.epinNumber">
    <clr-txt ></clr-txt>
    {{item.epinNumber}}
  </body>

以下是工作人员LINK

Angular JS - ng-change没有被触发

2 个答案: