如何从控制器观察服务中的变量以打开模式？

Question

http://plnkr.co/edit/bdHiU0?p=preview

如果我需要的变量是服务 returns 的一些数据，我没问题，像这样的东西会起作用：

vm.tickersObject = InitTickersFactory.returnTickers();

但是在上面的 plnkr 示例中，我只是在 tickerController 中设置了一个切换变量，然后将值传递并存储到 AddTickerFactory.

单击打开模式按钮查看日志。

现在我需要 tickerModalController 来获取该变量，然后显示或隐藏模态。但是 vs.showModal 在我的 tickerModalController 中仍然卡在 false:

vs.showModal = AddTickerFactory.getToggleStatus();

标记

<ticker-modal></ticker-modal>
<tickers-panel></tickers-panel>

完整代码

// Code goes here

angular.module('app', [])

.directive('tickersPanel', function() {
    return {
    restrict: "E",
    link: function($scope, el, attrs) {
      // console.debug($scope, attrs);
    },
    template: '<div class="ticker" ng-controller="tickerController"><button ng-click="openModal()">Open Modal</button></div>'
  };
})

.directive('tickerModal', function() {
    return {
    restrict: "E",
    link: function($scope, el, attrs) {
      // console.debug($scope, attrs);
    },
    template: '<div class="modal" ng-show="showModal" ng-controller="tickerModalController"><h1>Hello World!</h1></div>'
  };
})

.factory('AddTickerFactory', [function() {
    var vm = this;
        vm.addTickerToggle = false;

    var addTicker = {
        toggleAddTicker : toggleAddTicker,
        getToggleStatus : getToggleStatus
    }

    return addTicker;

    function toggleAddTicker(bool) {
      console.log(bool);
      vm.addTickerToggle = bool;
    }

    function getToggleStatus() {
        return vm.addTickerToggle;
    }
}])

.controller('tickerController', 
  ['$scope',
   'AddTickerFactory',
   function($scope,
            AddTickerFactory) {

  var vs = $scope;
      vs.addTicker = false;

  vs.openModal = openModal;

  function openModal() {
        vs.addTicker = !vs.addTicker;
        AddTickerFactory.toggleAddTicker(vs.addTicker);
  }
}])

.controller('tickerModalController', 
  ['$scope',
   'AddTickerFactory',
   function($scope,
            AddTickerFactory) {

  var vs = $scope;
      vs.showModal = false;

  vs.showModal = AddTickerFactory.getToggleStatus();
  console.log('vs.showModal',vs.showModal);

  vs.displayModal = displayModal;

  function displayModal() {
    vs.showModal = !vs.showModal;
  }
}]);

我试过添加手表，但显示没有任何变化：

vs.showModal = AddTickerFactory.getToggleStatus();
console.log('vs.showModal',vs.showModal);

$scope.$watch('vs.showModal', function(current, original) {
    console.log('current',current);
    console.log('original',original);
});

Answer 1

$watch 也有一个函数，所以你可以：

http://plnkr.co/edit/oJ2CTVXKCiLwL9oNw6YR?p=preview

  $scope.$watch(function(){
    return AddTickerFactory.getToggleStatus();
  }, function(current, original) {
    vs.showModal = current;
      console.log('current',current);
      console.log('original',original);
  });

如何从控制器观察服务中的变量以打开模式？

How to watch a variable in a Service from a Controller to open a modal?

javascript

angularjs

angularjs-directive

angularjs-service

标记

完整代码