Почему $ watch() не может работать

Question

Я создал угловую директиву в своем основном файле javascript.

myApp.directive('mymin', function(){ 
var func = function(scope, im, attrss, c){ 
    scope.$watch(function(){ return im.attr('ng-minlength') }, function(n){ 
     scope.min = n 
    }) 
    } 
    return {link:func, restrict: 'A'} 
}); 

Я просто хочу посмотреть состояние значения «ng-minlength». я ставлю эту директиву в один файл HTML

Html:

<input type="text" mymin ng-minlength=5> 
<input type="text" mymin ng-minlength=13> 

Я подумал, что, когда я изменить фокус с одного ввода на другой, значение «scope.min» будет изменен , но я ошибаюсь. Значение «scope.min» всегда 13.

Так вы могли бы рассказать мне причину? спасибо.

Answer 1

<input type="text" mymin ng-minlength=5>

Эта строка создаст mymin директиву, действующей на этот конкретный входной элемент - минимальная длина на этом входе не изменится, это всегда 5. (Вы, кажется, полагаете, что директивой будет sa мне один экземпляр на каждый элемент, на который вы его размещаете, это не так)

Если вы хотите, чтобы 1 директива смотрела и управляла состоянием каждого входа, создайте пользовательскую директиву для элемента , содержащего все эти входы.

Answer 2

вы можете сделать, а так: -

Если вы хотите смотреть атрибуту ДИРЕКТИВА

myApp.directive('mymin', function(){ 
var func = function(scope, im, attrss, c){ 
    scope.$watch('ngMinlength', function(n){ 
     scope.min = n 
    }) 
    } 
    return {link:func, restrict: 'A'} 
}); 

Answer 3

Если вы хотите обновить scope.min размытия элемента, используйте обработчик размытость событие с

var app = angular.module('my-app', [], function() {}) 
 

 
app.controller('AppController', function($scope) { 
 
    $scope.message = "Welcome"; 
 
}); 
 

 
app.directive('mymin', function() { 
 
    var func = function(scope, im, attrss, c) { 
 
    angular.element(im).on('blur', function() { 
 
     scope.min = im.attr('ng-minlength'); 
 
     scope.$apply(); 
 
    }) 
 
    } 
 
    return { 
 
    link: func, 
 
    restrict: 'A' 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="my-app"> 
 
    <div ng-controller="AppController"> 
 
    <p>{{min}}</p> 
 
    <input type="text" mymin ng-minlength=5 /> 
 
    <input type="text" mymin ng-minlength=13 /> 
 
    </div> 
 
</div>

Answer 4

Если вы хотите, чтобы следить за изменениями на атрибуты элементов, то вместо $ наблюдать за вами должен быть использован $ observ на объекте атрибутов (третий параметр функции связи)

attrss.$observe("ng-minlength", function(n){ 
    scope.min = n 
})