Question

我在主javascript文件中创建了一个angular指令。

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'}
});

我只想观看＆＃34; ng-minlength＆＃34;的值状态。我把这个指令放在一个html文件中

HTML

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

我认为当我将焦点从一个输入更改为另一个输入时，＆＃34; scope.min＆＃34;会改变，但我错了。＆＃34; scope.min＆＃34;的值总是13岁。

你能告诉我原因吗？非常感谢你。

Answer 1

如果你想观察元素属性的变化，那么你应该在属性对象上使用$ observe（链接函数的第三个参数），而不是$ watch。

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

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

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

此行将创建一个mymin指令，用于此特定输入元素 - 此输入的最小长度不会更改，它始终为5.（您似乎假设该指令将是同一个实例在你放置的每个元素上，情况并非如此）

如果您想要1个指令来监视和管理每个输入的状态，请为包含所有这些输入的元素创建自定义指令。

Answer 4

如果要更新元素模糊的scope.min，请使用模糊事件处理程序

＆＃13;

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'
  }
});

＆＃13;

<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>

＆＃13;

为什么$ watch（）无法工作

4 个答案: