Question

我的设计有两条指令。

var app = angular.module("app",[]);

app.directive("dirContainer", function($rootScope){
      return {
       template: "<div><clock></clock></div>",
       link:function(scope){        
        $rootScope.$on("onClockCreated",function(){
                alert(1)
        })
      }
    }
});

app.directive("clock", function($rootScope){
      return {
       template: "<div>clock</div>",
       link:function(scope){
            var clock = { time: "10:12" };

          $rootScope.$broadcast("onClockCreated",clock);
      }
    }
});

我想通过clock广播获得$rootScope指令创建的事件。但容器指令不会填充警报。

这是申请的DEMO。

更新

我已添加范围。$ emit及其填充警报。

app.directive("dirContainer", function($rootScope){
        return {
        template: "<div><clock></clock></div>",
      compile:function(scope){          
        $rootScope.$on("onClockCreated",function(){
                alert(1)
        })

        $scope.$emit("onClockCreated",function(){
                alert(1)
        })
      }
    }
});

但我无法理解。怎么会吵架？

Answer 1

这里有时间问题。 clock指令的link函数在dirContainer指令的link函数之前调用。如果在每个链接函数中放置console.log，则可以看到它。所以你的事件是在dirContainer指令监听之前发出的。如果你能告诉我们你想要达到的目标，我们可能会建议你一个合适的解决方案。

Answer 2

只需将link更改为compile

即可

compile:function(scope){        
            $rootScope.$on("onClockCreated",function(){
                    alert(1)
            })
          }

这里是demo https://jsfiddle.net/avsubL66/

Answer 3

您甚至可以通过创建父子指令方式

来实现此目的

 <div ng-app="myapp">
<container>
  <clock></clock>
  </container>
   </div>
var app = angular.module("myapp",[]);


app.directive("container", function () {
  return {
    restrict: "E",
    controller: function () {
      this.clockcreated = function (message) { 
        alert("It says: " + message);
      };
    }
  };
});


app.directive("clock", function () {
  return {
    restrict: "E",
    require: "^container",
    link: function (scope, element, attrs, containerCtrl) {
      containerCtrl.clockcreated("Clock created");
    }
  };
});

工作链接 - https://jsfiddle.net/2nqhsvmp/1/

Answer 4

解决此问题的一种方法是为您的父控制器公开api。

fiddle。

的工作分叉

这可以解决您对竞争条件的担忧。

var app = angular.module("app",[]);

app.directive("dirContainer", function($rootScope){
    return {
    template: "<div><clock></clock></div>",
    controller: ['$scope', function DirContainerController($scope) {
        this.sendAlert = function() {
            alert(1);
        };
    }],
    }
});

app.directive("clock", function($timeout, $rootScope){
    return {
    require: '^^dirContainer',
    template: "<div>clock</div>",
    link:function(scope, element, attrs, dirCtrl){
        var clock = { time: "10:12" };
            dirCtrl.sendAlert();
        }
    }
});

Answer 5

这是解决方案，

您的dirContrainer指令应该听取scope上的广播。不是他的rootScope。

app.directive("dirContainer", function($rootScope){
        return {
        template: "<div><clock></clock></div>",
      link:function(scope){         
        scope.$on("onClockCreated",function(clock){
                alert(1)
        })
      }
    }
});

并且确保在进行此测试时添加$timeout，因为当您broadcast.$on指令$broadcast时clock尚未就绪。

app.directive("clock", function($rootScope, $timeout){
        return {
        template: "<div>clock</div>",
      link:function(scope){
            var clock = { time: "10:12" };

          $timeout(function () {
            $rootScope.$broadcast("onClockCreated",clock);
          });

      }
    }
});

angularjs $ rootscope事件不会在父指令

5 个答案:

您甚至可以通过创建父子指令方式