Angularjs 在自定义指令之后运行$watch

我正在编写一个自定义指令来验证范围中的一些值。它应该像required属性一样工作，但它不是验证输入文本，而是验证范围中的值。我的问题是该值是在$scope.$watch函数中设置的，并且该函数在我的指令之后运行。因此，当我的指令尝试验证尚未设置的值时。是否可以在运行自定义指令之前运行$watch代码

代码如下：

var app = angular.module('angularjs-starter', []);

app.controller('MainCtrl', function($scope) {
  var keys = {
    a: {},
    b: {}
  };
  $scope.data = {};

  // I need to execute this before the directive below
  $scope.$watch('data.objectId', function(newValue) {
    $scope.data.object = keys[newValue];
  });
});

app.directive('requiredAttribute', function (){ 
   return {
      require: 'ngModel',
      link: function(scope, elem, attr, ngModel) {
          var requiredAttribute = attr.requiredAttribute;
          ngModel.$parsers.unshift(function (value) {
             ngModel.$setValidity('requiredAttribute', scope[attr.requiredAttribute] != null);
             return value;
          });
      }
   };
});

<input type="text" name="objectId" ng-model="data.objectId" required-attribute="object" />
<span class="invalid" ng-show="myForm.objectId.$error.requiredAttribute">Key "{{data.objectId}}" not found</span>

var-app=angular.module（'angularjs-starter'，[]）；
应用程序控制器（'MainCtrl'，函数（$scope）{
变量键={
a:{}，
b:{}
};
$scope.data={}；
//我需要在执行下面的指令之前执行此命令
$scope.$watch（'data.objectId'，函数（newValue）{
$scope.data.object=键[newValue]；
});
});
指令（'requiredAttribute'，函数（）{
返回{
要求：'ngModel'，
链接：功能（范围、要素、属性、ngModel）{
var requiredAttribute=attr.requiredAttribute；
ngModel.$parsers.unshift（函数（值）{
ngModel.$setValidity（'requiredAttribute'，作用域[attr.requiredAttribute]！=null）；
返回值；
});
}
};
});
找不到键“{data.objectId}”

这是一个扑克牌：

---

谢谢。

您可以将

$watch

安排在直接执行指令链接功能之前。您需要更改

链接

功能

link: function(scope, elem, attr, ngModel) {
    var unwatch = scope.$watch(attr.requiredAttribute, function(requiredAttrValue) {
        if (requiredAttribute=== undefined) return;

        unwatch();

        ngModel.$parsers.unshift(function (value) {
            ngModel.$setValidity('requiredAttribute', requiredAttrValue != null);
            return value;
        });
    });
}

此方法将仅激活指令内的$watch函数一次，并在第一次设置所需的范围变量时删除观察程序

还有另一种方法，您可以通过这种方式解析值并进行检查：

link: function(scope, elem, attr, ngModel) {
    var parsedAttr = $parse(attr.requiredAttribute);

    ngModel.$parsers.unshift(function (value) {
        ngModel.$setValidity('requiredAttribute', parsedAttr(scope) != null);
        return value;
    });
}

在这里，您需要使用AngularJS服务。这里的区别在于，这会将输入字段标记为无效，而无需等待在所需范围变量上设置的第一个值

这两种变体都允许传递表达式，而不是简单的变量名。这样就可以将某些内容编写为

required attribute=“object.var1.var2”

这取决于你需要什么