代码之家 › 专栏 › 技术社区 › Varun Sukheja

监视指令属性

angularjs-watch angularjs-directive angularjs javascript

Varun Sukheja · 技术社区 · 7 年前

我想在max上有一个手表,如果max的值发生变化,那么它应该发出警报

<div ng-controller='MyController' ng-app="myApp">
<div>{{title}}</div>
<input id='txt' type='text' max="{{max}}" value="{{max}}" foo/>
<input type="button" ng-click="changeMax()" value='change max' />

 scope: {
        max: '@',
    },
    link: function(scope, element, attrs) {
        /*scope.$watch(attrs.max, function() {
            alert('max changed to ' + max);
        });*/

        attrs.$observe('max', function(val) {
            alert('max changed to ' + max);
        });
    }

我不知道我犯了什么错误。我试过$watch和$observe,但都没用。

JS FIDDLE demo

1 回复 | 直到 7 年前

Vindhyachal Kumar 7 年前

请检查此工作代码。

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

app.directive('foo', function() {
    return {
        restrict: 'EA',
        scope: {
            max: '@',
        },
        link: function(scope, element, attrs) {
            /*scope.$watch(attrs.max, function() {
                alert('max changed to ' + max);
            });*/

            attrs.$observe('max', function(val) {
                alert('max changed to ' + val);
            });
        }
    }
});

app.controller('MyController', ['$scope', function($scope) {
    $scope.title = 'Hello world';
    $scope.max = 4;
    $scope.changeMax = function() {
        $scope.max += Math.floor(Math.random() * 10);
    }
}]);

    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js" ></script>
   <div ng-controller='MyController' ng-app="myApp">
        <div>{{title}}</div>
        <input id='txt' type='text' max="{{max}}" value="{{max}}" foo/>
        <input type="button" ng-click="changeMax()" value='change max' />
    </div>