如何从 AngularJS(without $parent) 中的多级指令获取控制器作用域

Question

如何从以下结构中的多级指令访问控制器范围：

我创建了一个在其内部具有多级范围的指令。

 1. Controller scope
 1.2. Directive1 scope(main directive)
 1.2.1. Directive2 scope
 1.2.1.1 Directive3 scope

我想从指令 3 获取控制器范围。

请不要引用 $parent 因为它的父级别是不确定的并且用户可以在另一个指令中使用这个指令。（见下面的代码）

<div ng-controller="Test">
   <custom-dir>
      <dir1>
         <dir2>
            <dir3>
            </dir3>
          </dir2>
       </dir1>
    <custom-dir>
</div>

用户在测试控制器中创建一个函数，该函数将在我的指令 3 范围内调用（如何获取控制器范围？）。

<div ng-controller="Test">
     <dir1>
         <dir2>
             <dir3>
             </dir3>
         </dir2>
     </dir1>
</div>

更多详情（请不要提及语法错误）：

控制器是：

App.controller('ScopeController', function ($scope, $rootScope, $uibModal, $http, $filter, $cookieStore, Common, $cookies) {
    $scope.runTest = function () {
        return `<input type='button' ng-click='testHtml()' value='Test'/>`;
    }
    $scope.testHtml = function () {
        alert("work");
    }
    $scope.model=someModel;
    $scope.config=someConfig;
    $scope.columns={html: $scope.runTest};
});

dir1 指令：

App.directive("dir1", function ($compile, $filter, $rootScope, $timeout, Common, $window, $http) {
    return {
        restrict: "E",
        priority: 1,
        terminal: false,
        templateUrl: "Content/html/Table.html?version=2.6",
        scope: {
            model: "=",
            columns: "=",
            config: "=",
            search: "@",
        },
        link: function (scope, elem, attrs) {
            scope.CallFunc = function (html) {
                if (typeof (html) =="function" )
                    return html();
                else {
                    return scope.$parent.$eval(html + "()", {});
                }
            }
        }
    }
});

动态指令编译 runTest 输出

App.directive('dynamic', function ($compile) {
    return {
        restrict: 'A',
        replace:true,
        link: function (scope, ele, attrs) {
            scope.$watch(attrs.dynamic, function (html) {
                ele.html(html);
                $compile(ele.contents())(scope);
            });
        }
    };
});

如果我将行 $compile(ele.contents())(scope); 更改为 $compile(ele.contents())(scope.$parent.$parent); 就可以了。

在这个指令中，我需要获取不带 $parent 的控制器范围，因为一些用户可能会在下面的另一个指令中使用这个指令：

<custom-dir>
    <dir1 model="model" columns="columns" config="config">
        <div dynamic="CallFunc(columns.html)"></div>
    </dir1>
</custom-dir>

使用 HTML 标签

<dir1 model="model" columns="columns" config="config">
    <div dynamic="CallFunc(columns.html)"></div>
</dir1>

Answer 1

在子控制器中执行如下操作：

$scope.$broadcast('yourEvent');

在父控制器中做监听器：

$scope.$on('yourEvent' , function(){
    //Handle your logic            
});

Answer 2

特例服务

.service('DirectDispatcher', function(){
  return {
    fireMe: angular.noop
  }
});

第一个指令注册一个回调函数

.directive(
...
  link:function(DirectDispatcher){
    function myHandler() {window.alert('just testing')}
    DirectDispatcher.fireMe = myHandler;
  }

... );

第二条指令触发函数回调

.directive(
...
  link:function(DirectDispatcher){
    DirectDispatcher.fireMe();
  }

...
);

Answer 3

此问题处理代码如下：

用于存储控制器作用域的服务：

App.service('TableService', function () {
        return {
            MyScope: null
        };
    });

Inject the TableService to dynamic 指令（该指令编译动态内容）：

App.directive('dynamic', function ($compile,TableService) {
    return {
        restrict: 'A',
        replace:true,
        link: function (scope, ele, attrs) {
            scope.$watch(attrs.dynamic, function (html) {
                ele.html(html);
                $compile(ele.contents())(TableService.MyScope);
            });
        }
    };
});

最后在控制器中：

App.controller('ScopeController', function ($scope, $rootScope, $uibModal, 
              $http, $filter, $cookieStore, Common, $cookies,TableService) {
    TableService.myScope = $scope;        
    $scope.runTest = function () {
        return `<input type='button' ng-click='testHtml()' value='Test'/>`;
    }
    $scope.testHtml = function () {
        alert("work");
    }
    $scope.model=someModel;
    $scope.config=someConfig;
    $scope.columns={html: $scope.runTest};
});

在那之后，动态指令可以访问控制器范围并且所有动态事件（如 testHtml）将被调用，即使该指令放入另一个指令（不使用 $parent）。

谢谢 @shaunhusain, huan feng 给我出主意。

如何从 AngularJS(without $parent) 中的多级指令获取控制器作用域

How to get controller scope from multi-level directives in AngularJS(without $parent)

javascript

angularjs

angularjs-directive

angularjs-scope