Question

HTML code：

<my-button> <my-button> <!-- First directive, contains a button -->

    <modal-data> <!-- Modal from bootstrap. It only show when my-button is clicked -->
       <!--This is a part of the template, rendered with the directive
      <div id="my-modal">
         {{ comments }} !!!!THIS IS NOT RENDERED!!!
      </div>
                -->
   </modal-data>

我的第一个指示

.directive('myButton', function(){
        return {
            restrict : 'E',
            templateUrl : 'button.html',
            controller : ['$scope', 'apiService', function($scope, apiService){

                this.getComments  = function(){
                    apiService.getComments()
                        .success(function(data){
                            $scope.comments = data;
                        });
                }

            }],
            link : function(scope, element, attrs, ctrl){
                element.on('click', function(){
                    ctrl.getComments();
                    $('#my-modal').modal();
                });
            }
        };
    })

模态指令：它只包含一个模板

.directive('modalComments', function(){
    return {
        restrict : 'E',
        templateUrl : 'modal.html'
    };
});

单击my-button时，将调用链接函数中的单击侦听器这在控制器中执行一个功能，该功能是从API获取数据的服务输出需要链接到将弹出的模态。

问题是我只能在my-button指令中访问此范围。

有人可以告诉我解决这个问题的方法吗？

修改

段：

(function(){
      
  angular.module('app', [])

  .controller('controller', function($scope){
    $scope.data = "Hello";

  })

  .directive('myButton', function(){
    return {
      restrict : 'E',
      template : 'Click me',
      controller : ['$scope', function($scope){
        this.getData = function(){
          $scope.data = "HEllo world";
        };
      }],
      link : function(scope, element, attrs, ctrl){

        element.on('click', function(){
          ctrl.getData();

        });

      }

    };
  });

})();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<div ng-app="app" ng-controller="controller">
      

  <my-button> {{ data }}</my-button>
  {{data}}

</div>

Answer 1

在我看来，你的解决方案设计糟糕。而不是使用普通按钮，你正在创建myButton。你为什么不用：

<button ng-click="yourController.getComments()"></button>

重用myButton是不可能的，因为它有很多业务逻辑。你的指令就像commentsBox而不是按钮

Answer 2

在阅读 Up and Running 时，如果想要使用此结构，则需要创建服务。

我们不需要可重用性，但我们确实需要应用级别状态。这是服务的目的之一。

Up and Running说：

您不想创建父级控制器，永远不会适用于大规模，可维护的应用

从另一个指令访问范围

2 个答案: