javascript - 更改模型属性时如何为 AngularJS 创建 on-change 指令？

Question

我试图找到解决以下问题的方法：

如何为 AngularJS 创建 on-change 指令？

而且我已经成立，答案中的 jsFiddle 它可以工作......但前提是该属性直接附加到 $scope。事实上，如果我

1) 将 $scope.strText 更改为 $scope.model.strText 2) 并将属性值从 strText 更改为 model.strText

不再工作了。

这里有HTML代码：

<div ng-controller="MyCtrl">
    <input on-change="model.strText"/>
    <input on-change="model.strText"/>
    <p>{{model.strText}}</p>
</div>

这里有JS代码：

var app=angular.module('myApp', []);

app.directive('onChange', function() {    
    return {
        restrict: 'A',
        scope:{'onChange':'=' },
        link: function(scope, elm, attrs) {            
            scope.$watch('onChange', function(nVal) { elm.val(nVal); });            
            elm.bind('blur', function() {
                var currentValue = elm.val();                
                if( scope.onChange !== currentValue ) {
                    scope.$apply(function() {
                        scope.onChange = currentValue;
                    });
                }
            });
        }
    };        
});

app.controller('MyCtrl', function($scope) { 
    $scope.model.strText = "Hello";
});

这里有jsFiddle

http://jsfiddle.net/pmcalabrese/XbJVb/

先感谢您。

Answer 1

您的数据源存在一些缺陷，因为$scope.model未定义。将其更改为

app.controller('MyCtrl', function ($scope) {
    $scope.model = {};
    $scope.model.strText = "Hello";
});