Question

我有service modal目的。当我点击身体上的一个按钮时，它工作正常。但是当我从标题中打电话时，它无法正常工作。

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

请查看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

我检查你的plunker，似乎你没有为你的html代码添加模板ng-controller =＆＃34; header＆＃34;

添加：

<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的范围不同。因此，您无法在MyCtrl内更改header的modalShown。

使用服务的方法是正确的，因为服务是单例，并且可以在两个控制器之间共享代码。只需要在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();
  };

}]);

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

如果您需要更多解释，只需发表评论，我会尽可能添加一些。

无法使用常用服务从Header链接打开`Modal`

2 个答案: