如何从控制器监视服务中的变量以打开模态

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

本文关键字:变量 模态 控制器 监视 服务      更新时间:2023-09-26

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


如果我需要的变量是服务返回的一些数据,我很好,这样的东西会起作用:

vm.tickersObject = InitTickersFactory.returnTickers();

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

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

现在我需要我的tickerModalController来获取那个变量,然后显示或隐藏一个模态。然而,我的tickerModalController中的vs.showModal仍停留为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);
});

$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);
  });