在指令中观察变量是在正确的时间触发它的唯一方法吗?

时间:2014-10-27 11:27:13

标签: angularjs angularjs-directive

您可能已在大多数angularjs指令中看到过该模式:

return {
 restrict: 'E',
 scope: {
   val: '='
 },
 link: function($scope) {
  $scope.$watch('val', function() {
    // all the code here...
  });
 }
};

我只是厌倦了这种模式,并且正在寻找比这更优雅的东西, 因为每个指令中的$ watch变量开始变得有点贵......

该问题的目的是如何在正确的时间获得指令链接功能代码?换句话说,当指令变量准备就绪时。

任何有更好解决方案的人?

2 个答案:

答案 0 :(得分:0)

如果您想收听特定事件,可以使用$ broadcast播放特定事件,然后通过$ on监听。

https://docs.angularjs.org/api/ng/type/$rootScope.Scope

答案 1 :(得分:0)

我不是100%确定你是什么意思

  

变量已准备就绪

但其中一个选项是使用ng-blur指令,请参阅下面的示例。

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

app.directive('someDirective', function() {

  return {
    restrict: 'AE',
    replace: 'true',
    scope: {
      val: '='
    },
    template: '<input type="text" ng-model="val" ng-blur="update()">',
    link: function(scope, elem, attr) {
      scope.update = function() {
        alert(scope.val);
      };
    }
  };

});

app.controller('fCtrl', function($scope) {

  $scope.data = {
    val: "test"
  }

});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="fCtrl">
    <some-directive val="data.val"></some-directive>
  </div>
</div>