CODEWITHSUNDEEP
javascriptangularjs
user1995781
user1995781

Reputation: 19453

Angular directive communication

Recently I follow a free tutorial at https://egghead.io/lessons/angularjs-directive-communication about directive communication along with it's example.

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

But it run into error, with error message Unknown provider: Provider <- <- cityDirective. How can I solve it?

Upvotes: 0

Views: 68

Answers (3)

vallepu veerendra kumar
vallepu veerendra kumar

Reputation: 392

some resources you want to use in your directive like predefined services($http..etc),userdefined services....etc you may write syntax like this

app.directive('country', ['$http','myOwnService', function($http,myOwnService)

{

 //use service here.

}]);

If not used any inbuilt services or custom things inside directive,you may write directive syntax like this,this way your directive will load very fast.

app.directive('country', function()

{

 //write code here

});

Upvotes: 0

deonclem
deonclem

Reputation: 880

Edit: It works if you remove all the explicit injections in your directives. Here's a working JSFiddle : https://jsfiddle.net/8ouskd3v/

I really like what egghead is doing but sometimes their code is not working properly when you just copy paste it.

You have an extra } in your state directive (after the restrict: 'E'). That's probably causing the error.

Upvotes: 0

Phuong Nguyen
Phuong Nguyen

Reputation: 3070

Change this

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

to this

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

Similar to state and city And also, you have an extra } in state directive declaration

plnkr

Upvotes: 1

Related Questions