Question

最近，我在https://egghead.io/lessons/angularjs-directive-communication关注指令沟通的免费教程及其示例。

的index.html

<body ng-app="app">
    <country>
        <state>
            <city></city>
        </state>
    </country>
</body>

app.js

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

app.directive('country', ['', function(){
    return {
        controller: function() {
            this.makeAnnouncement = function(message){
                console.log("Country says: " + message);
            };
        },
        restrict: 'E'
    };
}]);

app.directive('state', ['', function(){
    return {
        controller: function() {
            this.makeLaw = function(law){
                console.log("Law: " + law);
            };
        },
        restrict: 'E'
    };
}]);

app.directive('city', ['', function(){
    return {
        restrict: 'E', 
        require: ["^country","^state"],
        link: function($scope, iElm, iAttrs, controller) {
            controller[0].makeAnnouncement("from city");
            controller[1].makeLaw("Jump higher");
        }
    };
}]);

但它遇到错误，错误消息Unknown provider: Provider <- <- cityDirective。我该如何解决？

Answer 1

更改此

app.directive('country', ['', function(){

到这个

app.directive('country', [function(){

与州和城市类似而且，你有一个额外的}状态指令声明

plnkr

Answer 2

编辑：如果您删除指令中的所有显式注入，它都有效。这是一个有效的JSFiddle：https://jsfiddle.net/8ouskd3v/

我非常喜欢egghead正在做的事情，但是当你复制粘贴它时，有时它们的代码工作不正常。

}指令中有额外的state（restrict: 'E'之后）。这可能导致错误。

Answer 3

您希望在指令中使用的某些资源，如预定义服务（$ http..etc），用户定义服务....等您可以编写这样的语法

app.directive（＆＃39; country＆＃39;，[＆＃39; $ http＆＃39;，＆＃39; myOwnService＆＃39;，函数（$ HTTP，myOwnService）

{

 //use service here.

}]);

如果没有在指令中使用任何内置服务或自定义内容，你可以编写这样的指令语法，这样你的指令加载速度非常快。

app.directive（＆＃39;国家＆＃39 ;, 函数（）

{

 //write code here

});

角度指令沟通

3 个答案: