替代方法，而不是 angularjs 中的 $watch答案

【问题标题】：alternative method instead $watch in angularjs替代方法，而不是 angularjs 中的 $watch
【发布时间】：2014-03-24 09:16:19
【问题描述】：

我有一个范围变量，当它返回 true 时，我需要触发一些事件或做一些事情。在我的情况下，范围变量第一次返回未定义，然后返回true。在这种情况下，我使用 $watch 方法来获得预期的功能。有没有其他方法可以代替使用 $watch 来做同样的事情？

 scope.$watch () ->
    scope.initiateChild
  , (value) ->
    if value is true
      $timeout ->
        scope.buildOnboarding()
      , 1000

【问题讨论】：

您不想使用$watch有什么特别的原因吗？
$watch 似乎完全满足您的要求，您想要$watch 的别名吗？

标签： javascript angularjs

【解决方案1】：

您可以尝试使用 AngularJS $on()、$emit() 和 $broadcast()。

这里是一个例子：http://www.binaryintellect.net/articles/5d8be0b6-e294-457e-82b0-ba7cc10cae0e.aspx

【讨论】：

@AryehBeitz 感谢您的报告。将其替换为另一篇有用的文章。
$on()、$emit() 和 $broadcast()- 哪一个是最好和最快的？

【解决方案2】：

您可以使用 JavaScript 的 getter 和 setter，而无需花费任何使用 $watch 的费用。在设置器中编写代码以在角度更改您在范围内使用的模型值时执行您想要的操作。作为用户类型，它会获取 null 或 State 对象。对于处理相互依赖的预输入文本框很有用。在没有用户选择任何内容的情况下输入状态后就像县列表一样。

这里有一些伪样式代码来理解这个想法。

      <input ng-model="searchStuff.stateSearchText" />
      <div>{{searchStuff.stateObject.counties.length}}</div>
      <div>{{searchStuff.stateObject.population}}</div>

        $scope.searchStuff=new function(){var me=this;};
        $scope.searchStuff.stateObject = null;

        $scope.searchStuff.getStateObjectFromSearchText = function(search){
        // get set object from search then
           return stateObject;
        };

        $scope.searchStuff._stateSearchText= "";
        Object.defineProperty($scope.searchStuff, 'stateSearchText', {
            get: function () {
                return me._stateSearchText;
            },
            set: function (value) {
                me,_stateSearchText = value;
                me.stateObject = getStateObjectFromSearchText (value);
            }

        });

【讨论】：

【解决方案3】：

看到这个小提琴：http://jsfiddle.net/simpulton/XqDxG/

还可以观看以下视频：Communicating Between Controllers

下面给出一个示例

HTML：

<div ng-controller="ControllerZero">
  <input ng-model="message" >
  <button ng-click="handleClick(message);">LOG</button>
</div>

<div ng-controller="ControllerOne">
  <input ng-model="message" >
</div>

<div ng-controller="ControllerTwo">
  <input ng-model="message" >
</div>

javascript：

var myModule = angular.module('myModule', []);
myModule.factory('mySharedService', function($rootScope) {
  var sharedService = {};

  sharedService.message = '';

  sharedService.prepForBroadcast = function(msg) {
    this.message = msg;
    this.broadcastItem();
  };

  sharedService.broadcastItem = function() {
    $rootScope.$broadcast('handleBroadcast');
  };

  return sharedService;
});

function ControllerZero($scope, sharedService) {
  $scope.handleClick = function(msg) {
    sharedService.prepForBroadcast(msg);
  };

  $scope.$on('handleBroadcast', function() {
    $scope.message = sharedService.message;
  });        
}

function ControllerOne($scope, sharedService) {
  $scope.$on('handleBroadcast', function() {
    $scope.message = 'ONE: ' + sharedService.message;
  });        
}

function ControllerTwo($scope, sharedService) {
  $scope.$on('handleBroadcast', function() {
    $scope.message = 'TWO: ' + sharedService.message;
  });
}

ControllerZero.$inject = ['$scope', 'mySharedService'];        

ControllerOne.$inject = ['$scope', 'mySharedService'];

ControllerTwo.$inject = ['$scope', 'mySharedService'];

【讨论】：