Question

我有一个lightbox-dierective和控制器，看起来像这样：

directive('modalDialog', function() {
  return {
    restrict: 'E',
    scope: {
      show: '='
    },
    replace: true, // Replace with the template below
    transclude: true, // we want to insert custom content inside the directive
    template: '<div class="ng-modal" ng-show="show"><div class="ng-modal-overlay" ng-click="hideModal()"></div><div class="ng-modal-dialog" ng-style="dialogStyle"><div class="ng-modal-dialog-content" ng-transclude><div class="ng-modal-close" ng-click="hideModal()">X</div></div></div></div>'
  };
}).controller('Lightbox', function($scope) {
  $scope.modalShown = false;
  $scope.toggleModal = function() {
    $scope.modalShown = !$scope.modalShown;
  };
});

这是desierd html，我需要的是打开第一个的secon ligthbox：

<div ng-controller="Lightbox">
     <span ng-mousedown='toggleModal()'>Open lightbox one</span>
    <modal-dialog show='modalShown'>
      <h2>One lightbox <span ng-mousedown='toggleModal()'>Open lightbox two</span></h2>
    </modal-dialog>
</div>

<div ng-controller="Lightbox">
    <span ng-mousedown='toggleModal()'>Open lightbox one</span>

    <modal-dialog show='modalShown'>
      <h2>another lightbox</h2>
    </modal-dialog>
</div>

对于大多数情况，它很棒！我在整个网站的几个场景中使用它，有不同的灯箱和不同的内容。

我现在遇到了一个案例，我需要从控制器外部调用其中一个灯箱。这可以实现吗？在这种情况下，我如何参考正确的灯箱？

Answer 1

我将该设置扩展到对象

var modalSet = {
  shown: false,
  toggle: function(){ modalSet.shown = !modalSet.shown }
}

然后将它放在您的主控制器（具有ngApp属性的控制器）上，并使整个范围可以修改。

此外，指令确实有一个控制器选项，但由于在任何给定时间只会显示一个模态，您可能不希望为每个新实例重新创建一个控制器。

重新阅读您的问题：它到底在哪里 - ＆gt; “在控制器之外”？

从控制器外部调用角度控制器中的功能？

1 个答案: