Question

上下文

我实际上正在开发一个应用程序，我需要从控制器动态生成指令到视图（拖放系统）。

它的工作原理如下：

指令

angular.module('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);
                });
            }
        };
    });

在控制器中，它看起来像：

$scope.listModules = [
            {libelle: "Utilisateurs connectés", template: "<div user-connecte></div>", drag: true}
]

在HTML文件中：

<div ng-repeat="currentModule in listModules" dynamic="currentModule.template">
The directive loaded
</div>

问题

我想使用

$scope.$emit('event');

从我的控制器，发送一些信息到我的指令，这应该得到它：

$scope.$on('event',function(){console.log('yiihaaa');})

似乎没有发生任何事......

我需要显示日志。

你能帮助我吗？

感谢您提前

Answer 1

正如@Grundy所说。从 $ rootScope 使用 $ broadcast 和 $ 。

var subscription = $rootScope.$on("myEvent", function() {
    console.log("yiihao");
});

别忘了摧毁它。

$rootScope.$on('$destroy', function () {
    subscription();
});

$ broadcast 就是这样。

$rootScope.$broadcast("myEvent", {});

Answer 2

ngRepeate创建自己的隔离范围，指令链接函数中的范围就是这个孤立的范围。

执行$emit

时

通过范围层次结构向上调度事件名称，通知已注册的$ rootScope.Scope侦听器。

要将事件发送到子范围，您需要使用$broadcast

因此，为了解决您的问题，您至少有两种方法

1）使用 $ broadcast 代替 $ emit

$scope.rechercherStats = function () { $scope.$broadcast('reload'); };

＆＃13;

// Code goes here
angular.module('app',[])
       .controller('ctrl',function($scope){
         $scope.listModules = [
            {libelle: "Utilisateurs connectés", template: "<div user-connecte></div>", drag: true}
];
$scope.rechercherStats = function () {console.log('reload'); $scope.$broadcast('reload'); };

       });
angular.module('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);
                });
                scope.$on('reload',function(){console.log('yiihaaa');})

            }
        };
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

  <div ng-app="app" ng-controller="ctrl">
Sample    
    <div ng-repeat="currentModule in listModules" dynamic="currentModule.template">
The directive loaded
</div>
    <input type="button" ng-click="rechercherStats()" value="btn"/>
    </div>

＆＃13;

2）添加不在范围ngRepeat中的侦听器，但在父范围

中

angular.module('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);
                   });
                   scope.$parent.on('event',function(){console.log('yiihaaa');});
               }
           };
      });

＆＃13;

// Code goes here
angular.module('app',[])
       .controller('ctrl',function($scope){
         $scope.listModules = [
            {libelle: "Utilisateurs connectés", template: "<div user-connecte></div>", drag: true}
];
$scope.rechercherStats = function () {console.log('reload'); $scope.$emit('reload'); };

       });
angular.module('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);
                });
                scope.$parent.$on('reload',function(){console.log('yiihaaa');})

            }
        };
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

  <div ng-app="app" ng-controller="ctrl">
Sample    
    <div ng-repeat="currentModule in listModules" dynamic="currentModule.template">
The directive loaded
</div>
    <input type="button" ng-click="rechercherStats()" value="btn"/>
    </div>

＆＃13;

Answer 3

您是否尝试过以下链接：http://onehungrymind.com/angularjs-dynamic-templates/

他们正在动态加载指令。该方法可以根据您的要求进行调整吗？

角度，动态指令加载和事件管理

3 个答案: