[AngularJS] Directive Communication, 'require' 

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="utf-8">
  <title>Egghead Videos</title>
  <link rel="stylesheet" href="./foundation.min.css">
  <script type="text/javascript" src="./angular.min.js"></script>
  <script type="text/javascript" src="./app.js"></script>  
</head>
<body ng-app="app">
    <country title="Finland">
        <state title="North K">
            <city title="Joensuu">
            </city>
        </state>
    </country>
</body>
</html>

 

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

app.directive('country', function(){
    return{
        restrict: 'E',
        scope:{title: '@'},
        controller: function(){
            this.sayCountry = function(){
                console.log("This is country: ");
            }
        }
    }
});

app.directive('state',function(){
    return{
        restrict: 'E',
        scope:{title:'@'},
        require: '^country',
        controller: function(){
            this.sayState=function(){
                console.log("This is state: ");
            }
        },
        link: function(scope, element, attrs, countryCtrl){
            countryCtrl.sayCountry();
        }
    }
});

app.directive('city',function(){
   return{
       restrict: 'E',
       scope: {title: '@'},
       require: ['^country', '^state'],
       link:function(scope, element, attrs, ctrls){
           console.log("This is city: ");
           ctrls[0].sayCountry();
           ctrls[1].sayState();
       }
   }
});

 

posted @ 2014-08-27 01:42  Zhentiw  阅读(168)  评论(0)    收藏  举报