替代方法而不是$ watch in angularjs

时间:2014-03-24 09:16:20

标签: javascript angularjs

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

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

3 个答案:

答案 0 :(得分:3)

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

以下是一个示例:http://www.binaryintellect.net/articles/5d8be0b6-e294-457e-82b0-ba7cc10cae0e.aspx

答案 1 :(得分:1)

您可以使用JavaScript getter和setter而无需使用$ watch。 当角度更改您在示波器中使用的模型值时,在setter中编写代码以执行您想要的操作。它获取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);
            }

        });

答案 2 :(得分:0)

看到这个小提琴: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'];