[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 @   Zhentiw  阅读(165)  评论(0)  编辑  收藏  举报
（评论功能已被禁用）
编辑推荐：
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· AI技术革命，工作效率10个最佳AI工具
点击右上角即可分享
微信分享提示
AI IDE Trae