无法使用公共服务打开头文件中的“Modal”链接

Question

我有一个service modal的目的。当我点击主体中的按钮时，它可以正常工作。但是当我从header中调用时，它不工作。

我在这两种情况下都包含了服务。

请查看demo以获得清晰的理解。

现场演示

代码如下:

var app = angular.module('myApp', []);
  app.service('modalService', function() {
      this.width  = 100;
      this.height  = 100;
  });
  app.directive('modalDialog', function(modalService) {
  return {
    restrict: 'E',
    scope: {
      show: '='
    },
    replace: true, // Replace with the template below
    transclude: true,
    link: function(scope, element, attrs) {
      scope.dialogStyle = {};
      if (modalService.width != 0)
        scope.dialogStyle.width = modalService.width;
      if (modalService.height != 0)
        scope.dialogStyle.height = modalService.height;
      scope.hideModal = function() {
        scope.show = false;
        modalService.modalContent = '';
      };
    },
    templateUrl: "modal.html"
  };
});
app.controller('MyCtrl', ['$scope', 'modalService', function($scope, modalService) {
  $scope.modalShown = false;
  $scope.modalService = modalService;
  $scope.toggleModal = function() {
    console.log(modalService);
    $scope.modalService.modalContent = 'It works';
    $scope.modalShown = !$scope.modalShown; //works here.
  };
}]); 
app.controller('header', ['$scope', 'modalService', function($scope, modalService) {
  $scope.toggleModal = function() {
    console.log(modalService);
    $scope.modalShown = !$scope.modalShown; //not working from here
  };
}]); 

Answer 1

我检查你的柱塞，似乎你没有添加模板到你的html代码ng-controller="header"

添加:

<modal-dialog show="modalShown" width='400px' height='60%'>
   <p>{{modalService.modalContent}}<p>
</modal-dialog>

和你的HTML应该像这样:

<div class="header" ng-controller="header">
  <ul>
    <li><a ng-click="toggleModal()" href="">Link1</a></li>
    <li><a ng-click="toggleModal()" href="">Link2</a></li>
  </ul>
  <modal-dialog show="modalShown" width='400px' height='60%'>
   <p>{{modalService.modalContent}}<p>
</modal-dialog>
</div>
<div ng-controller="MyCtrl">
<button ng-click="toggleModal()">Open Modal Dialog</button>
<modal-dialog show="modalShown" width='400px' height='60%'>
   <p>{{modalService.modalContent}}<p>
</modal-dialog>

Answer 2

基本上问题是你试图打开一个模态从不同的(并行)范围。header的范围不同于MyCtrl的范围。所以你不能在header里面改变MyCtrl的modalshow。

你使用服务的方法是正确的，因为服务是单例的，可以在两个控制器之间共享代码。你只需要在modalService中创建一个API来打开和关闭模态。

我已经试着找出一个快速的解决办法。这是一个简单的方法来说明我的解决方案:

[...]
app.service('modalService', function() {
  this.width  = 100;
  this.height  = 100;
  // Our simple listener array
  var listeners = [];
  // Add an api method to toggle
  this.toggle = function(){
    if (listeners.length) {
      for (var i=0; i<listeners.length; i++) {
        listeners[i].call(this);
      }
    }
  };
  // Add listener function
  this.addListener = function(cb){
    listeners.push(cb);
  };
});
app.directive('modalDialog', function(modalService) {
  return {
    [...]
    link: function(scope, element, attrs) {
      [...]
      // This function allows us to change the scope var from outside
      modalService.addListener(function(){
        scope.show = !scope.show;
      });
      [...]
    },
    [...]
  };
});
app.controller('MyCtrl', ['$scope', 'modalService', function($scope, modalService) {
  [...]
  $scope.toggleModal = function() {
    $scope.modalService.modalContent = 'It works';
    // Toggle the modal via api method
    console.log(modalService);
    modalService.toggle();
  };
}]); 
app.controller('header', ['$scope', 'modalService', function($scope, modalService) {
  $scope.toggleModal = function() {
    // Toggle the modal via api method
    console.log(modalService);
    modalService.toggle();
  };
}]);

这是一个更新的plunk: http://plnkr.co/edit/PErrDD41wRu3Kvyncx45?p=preview

如果你需要更多的解释，请评论，如果可能的话我会补充的。