Javascript angularjs$rootscope事件不会在父指令上激发

我的设计有两个指导方针

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);
      }
    }
});

但我不明白。它是如何工作的？

这是解决方案

您的

dircontainer

指令应该在其

范围内收听广播。不是他的
rootScope

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

这是解决办法

您的
dircontainer
指令应该在其
范围内收听广播。不是他的
rootScope

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

你的时间安排有问题。在dirContainer指令的link函数之前调用clock指令的link函数。
如果在每个链接函数中放置一个console.log，就可以看到它。
因此，您的事件在dirContainer指令侦听之前发出。
如果您能告诉我们您想要实现的目标，我们可能会建议您一个合适的解决方案。
您遇到了时间问题。在dirContainer指令的link函数之前调用clock指令的link函数。
如果在每个链接函数中放置一个console.log，就可以看到它。
因此，您的事件在dirContainer指令侦听之前发出。
如果您能告诉我们您想要实现的目标，我们可能会建议您一个合适的解决方案。
只需将
链接
更改为
编译

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

这里是演示
只需将
链接
更改为
编译

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

这里是演示
您甚至可以通过创建父子指令的方式来实现这一点

var-app=angular.module（“myapp”，[]）；
应用程序指令（“容器”，函数（）{
返回{
限制：“E”，
控制器：函数（）{
this.clockcreated=函数（消息）{
警报（“它说：”+消息）；
};
}
};
});
应用指令（“时钟”，功能（）{
返回{
限制：“E”，
需要“^container”，
链接：功能（范围、元素、属性、容器TRL）{
containerCtrl.时钟已创建（“时钟已创建”）；
}
};
});

工作链接-
您甚至可以通过创建父子指令的方式来实现这一点

var-app=angular.module（“myapp”，[]）；
应用程序指令（“容器”，函数（）{
返回{
限制：“E”，
控制器：函数（）{
this.clockcreated=函数（消息）{
警报（“它说：”+消息）；
};
}
};
});
应用指令（“时钟”，功能（）{
返回{
限制：“E”，
需要“^container”，
链接：功能（范围、元素、属性、容器TRL）{
containerCtrl.时钟已创建（“时钟已创建”）；
}
};
});

工作链接-
解决此问题的一种方法是为父控制器公开api

你的工作叉

这解决了您对比赛条件的担忧

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();
        }
    }
});

var-app=angular.module（“app”，[]）；
app.directive（“dirContainer”，函数（$rootScope）{
返回{
模板：“”，
控制器：['$scope'，函数DirContainerController（$scope）{
this.sendAlert=函数（）{
警报（1）；
};
}],
}
});
应用程序指令（“时钟”，函数（$timeout，$rootScope）{
返回{
要求：“^dirContainer”，
模板：“时钟”，
链接：函数（范围、元素、属性、dirCtrl）{
var clock={time:“10:12”}；
dirCtrl.sendAlert（）；
}
}
});
解决此问题的一种方法是为父控制器公开api

你的工作叉

这解决了您对比赛条件的担忧

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();
        }
    }
});

var-app=angular.module（“app”，[]）；
app.directive（“dirContainer”，函数（$rootScope）{
返回{
模板：“”，
控制器：['$scope'，函数DirContainerController（$scope）{
this.sendAlert=函数（）{
警报（1）；
};
}],
}
});
应用程序指令（“时钟”，函数（$timeout，$rootScope）{
返回{
要求：“^dirContainer”，
模板：“时钟”，
链接：函数（范围、元素、属性、dirCtrl）{
var clock={time:“10:12”}；
dirCtrl.sendAlert（）；
}
}
});
超时设置为2000。但是dirContainer的创建可能需要3000毫秒。有没有关于这些问题的解决方案。你不必担心数量。只需删除2000&它也可以正常工作。我编辑了答案。从$timeout开始，广播将在下一个执行周期中进行。所以到那时$on已经准备好执行了。是否可以使用$q defer？不，您不能在$qTimeout set 2000之前重放$timeout。但是dirContainer的创建可能需要3000毫秒。有没有关于这些问题的解决方案。你不必担心数量。只需删除2000&它也可以正常工作。我编辑了答案。从$timeout开始，广播将在下一个执行周期中进行。所以到那时$on已经准备好执行了。可以使用$q defer吗？不，你不能用$qI重放$timeout。有一个通用组件，我可以把它放在任何dom元素或任何指令中。但有时我需要从父元素访问clock对象，它的container.ok。因此，您应该考虑使用Dillumn的解决方案，或者将您的时钟对象放入服务中，这样每个需要该对象的组件都可以从服务中获得它。我可以用$q defer解决这个计时问题吗？如果是，怎么做？我有一个通用组件，我可以把它放在任何dom元素或任何指令中。但有时我需要从父元素访问clock对象，它的container.ok。因此，您应该考虑使用Dillumn的解决方案，或者将您的时钟对象放入服务中，这样每个需要该对象的组件都可以从服务中获得它。我可以用$q defer解决这个计时问题吗？如果是，如何使用？为什么使用编译函数@纳比卡说，这是一个时间问题。compile解决了这个时间问题吗lrm？compile是在呈现所有子指令时启动的，因此它解决了您的问题这里是如何定义这些链接和编译函数的我读过关于compile的文章，但是compile没有范围。它有元素和属性参数。为什么要使用编译