控制器间通信，角度方式

我试图找出控制器/指令之间共享属性或状态的“首选”或“角度方式”。有多种方法可以实现这一点，但我想遵循最佳实践。下面是一些如何实现这一点的平庸示例：

1.使用$scope.$watch

// The parent controller/scope
angular.module('myModule').controller('parentController', ['$scope', function($scope) {
    $scope.state = {
        myProperty: 'someState'; // Default value to be changed by some DOM element
    };
}]);

// The child controller/scope.
angular.module('myModule').controller('childController', ['$scope', function($scope) {
    $scope.$watch('state.myProperty', function (newVal) {
        // Do some action here on state change
    });
}]);

Edit：根据下面的答案，这是不好的做法，应该避免。它是不可测试的，并且会产生不需要的 DOM 依赖性。

2.使用$broadcast

// The parent controller
angular.module('myModule').controller('parentController', ['$scope', function($scope) {
    var myProperty = 'someState';
    $scope.setState = function (state) {
        myProperty = state; // Set by some other controller action or DOM interaction.
        $scope.$broadcast('stateChanged', state); // Communicate changes to child controller
    }
}]);

// The child controller.
angular.module('myModule').controller('childController', ['$scope', function($scope) {
    $scope.$on('stateChanged', function (evt, state) {
        // Do some action here
    }
}]);

Edit：同样不好的做法，因为您需要知道控制器在 DOM 中的位置才能确定使用 $broadcast （在 DOM 下）或 $emit （在 DOM 上）的天气。

3. 使用服务

angular.module('myModule').factory('stateContainer', [function () {
    var state = {
            myProperty: 'defaultState'
        },
        listeners = [];

    return {
        setState: function (newState) {
            state.myProperty = newState;
            angular.forEach(listeners, function (listener) {
                listener(newState);
            });
        },
        addListener: function (listener) {
            listeners.push(listener);
        }
    }
}]);

// The parent controller
angular.module('myModule').controller('parentController', ['$scope', 'stateContainer', function($scope, stateContainer) {
    $scope.setState = function (state) {
        stateContainer.setState(state);
    };
}]);

// The child controller.
angular.module('myModule').controller('childController', ['$scope', 'stateContainer', function($scope, stateContainer) {
    stateContainer.addListener(function (newState) {
        // Do some action here
    });
}]);

我可能在这里错过了一些方法，但你明白了。我正在努力寻找best方法。虽然很冗长，但我个人倾向于此处列表中的#3。但我有 Java 和 jQuery 背景，侦听器被广泛使用。

Edit: 下面的回答很有见地。有人谈到使用以下方法在父/子指令之间共享状态require指令配置。另一种讨论直接向范围共享服务或服务属性。我相信，根据需要，它们在 Angular 中的最佳实践或不是最佳实践方面都是正确的。

如果正确完成，这些中的任何一个都将起作用，但据我所知，服务的变体是首选方式。

问题是，您在服务案例中是否需要监听器？ Angular 本身会更新任何视图（这是控制器的目的），那么为什么需要侦听器或监视呢？改变值本身就足以改变视图。

app.factory('stateService',function() {
  return {
     myState: "foo"
  }
})
.controller('one',function($scope,stateService) {
    $scope.changeState = function() {
      stateService.myState = $scope.state;
    };
})
.controller('two',function($scope,stateService) {
    $scope.svc = stateService;
})

然后您可以在您的视图中执行以下操作（不完整）：

<div ng-controller="one">
  <input name="state" ng-model="state"></input>
  <button type="submit" ng-click="changeState()">Submit</button>
</div>
<div ng-controller="two">{{svc.myState}}</div>

事实是，您甚至不需要为拥有按钮和功能而走那么远。如果你只是绑ng-model一起它将起作用：

<div ng-controller="one">
  <input name="state" ng-model="svc.myState"></input>
</div>
<div ng-controller="two">{{svc.myState}}</div>

尝试下面的jsfiddlehttp://jsfiddle.net/cwt9L6vn/1/ http://jsfiddle.net/cwt9L6vn/1/