来自同一范围的访问指令

Question

我已经创建了一个定义了方法的自定义指令：

app.directive('modal', function() {
  return {
    restrict: 'E',
    template: '<div class="modal" ng-show="visible">modal box</div>',
    scope: {
      ngModel: '='
    },
    link: function(scope, element, attrs) {
      scope.visible = false;
      scope.show = function () {
        this.visible = true;
      };
      scope.close = function () {
        this.visible = false;
      };
    }
  };
});

我是这样使用它的：

<button ng-click="modal.show()">Show modal</button>
<modal></modal>

但是我无法在同一范围内访问此 modal 指令。

我已经尝试使用已定义的 id 属性，例如：

<button ng-click="myModal.show()">Show modal</button>
<modal id="myModal"></modal>

甚至可以通过这种方式访问指令范围吗？

或者更好的方法是使用 $rootScope 或广播事件？

我不想在控制器中定义这个指令 - 控制器不应该知道它的存在。

Answer 1

父控制器可以访问其子指令的范围。

Here 我创建了一个小示例来说明我在说什么。除非您的指令中有 scope 属性，否则它将使用其父级的范围。

Answer 2

我会参加活动：

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.showModal = function(){
        $scope.$parent.$broadcast("show-modal");
    };

    $scope.hideModal = function(){
        $scope.$parent.$broadcast("hide-modal");
    };
}

myApp.directive('modal', function() {
  return {
    restrict: 'E',
    template: '<div class="modal" ng-show="visible">modal box</div>',
    link: function(scope, element, attrs) {
      scope.visible = false;
      scope.$on('show-modal', function(){
          scope.visible = true;
      });

      scope.$on('hide-modal', function(){
          scope.visible = false;
      });
    }
  };
})

基本上：从您的控制器广播一个事件（'show' 或 'hide'），在指令中捕获它并执行您的逻辑。

你的 html 模板：

<div ng-controller="MyCtrl" ng-app="myApp">
  <button ng-click="showModal()">Show modal</button>
    <br/>
    <button ng-click="hideModal()">Hide modal</button>
  <modal></modal>
</div>

Answer 3

您发现您的体系结构存在问题。确实有解决方法，但它们只会使问题变得更加复杂。

如果您正在寻找稳定的解决方案，请查看 Angular Bootstrap 中 $modal 的代码。您会看到他们有 $modal 作为一项服务。

原因（举例）如下：

可以从任何范围进行打开和关闭
模态模板与其他代码分开。

Answer 4

您的视图可能如下所示：

<button ng-click="showModal()">Show modal</button>
<modal></modal>

您可以将您的方法放在独立作用域之外的 $rootScope 中。只有模板使用它的独立作用域和在其上定义的变量。

这里是修改后的例子：

app.directive('modal', function ($rootScope) {
    return {
        restrict: 'E',
        template: '<div ng-show="visible">modal box</div>',
        scope: {},
        link: function (scope, element, attrs) {
            scope.visible = false;
            $rootScope.showModal = function () {
                console.log("showModal");
                scope.visible = true;
            };
            $rootScope.closeModal = function () {
                console.log("closeModal");
                scope.visible = false;
            };
        }
    };
});

来自同一范围的访问指令

Access directive from the same scope

angularjs

angularjs-directive

angularjs-scope