<!--指令 1.5 作用域 每一条指令都继承了它的父作用域,也就是传入link函数的schop参数。 AngularJS在指令定义对象中提供了scope键能够完全控制指令元素 对应的作用域。scope键可以接收一下三种值: false 默认值 指令作用域与父元素作用域一致 true 指令作用域继承于父作用域,不过会创建自己的子作用域。 object 也能将键值组成的对象传给作用域,AngularJS会创建一个“隔离作用域”该作用域并不继承父作用域中的任何信息。 =表明HTML属性值将是JSON对象 @表明HTML属性将值将是一个字符串 &表明HTML属性是某个控制器中的函数。 --> <!--require--> <html> <head> <title>Zhiling App</title> <style> .ddd{ background-color: aqua; } </style> </head> <body ng-app="ngApp"> <div> <superman strength>动感超人---力量</superman><!--superman指令 属性strength--> </div> <div> <superman strength speed>动感超人2----力量+敏捷</superman> </div> <div> <superman strength speed light>动感超人3----力量+敏捷+发光</superman> </div> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.js"></script> <script type="text/javascript"> var myModule=angular.module('ngApp', []); myModule.directive('superman',function () {//创建指令 return{ scope:{},//独立scope 使指令之间互不影响 scope数据绑定= @ & restrict:'AE',//如何是用指令 controller:function ($scope) {//与mvc里面的contreller不是一个东西,是指令内部的controller,用来给指令暴露出一组public方法,给外部调用的 $scope.abilities=[]; this.addStrength=function () { $scope.abilities.push("strength"); }; this.addSpeed=function () { $scope.abilities.push("speed"); }; this.addLight=function () { $scope.abilities.push("light"); }; }, link:function (scope,element,attrs) {//处理指令内部事件的 element.addClass('ddd'); element.bind("mouseenter",function () { console.log(scope.abilities); }) } } }); myModule.directive("strength",function () { return{ require:'^superman',//表示strength指令是依赖于superman指令的,link函数就可以写第四个参数,ag会将 link:function (scope,element,attrs,supermanCtrl) {//supermanCtrl自动注射到link函数里面的,这样就可以调用superman指令暴露出来的方法了 supermanCtrl.addStrength(); } } }); myModule.directive('speed',function () { return{ require:'^superman', link:function (scope,element,arrs,supermanCtrl) { supermanCtrl.addSpeed(); } } }); myModule.directive('light',function () { return{ require:'^superman', link:function (scope,element,arrs,supermanCtrl) { supermanCtrl.addLight(); } } }) </script> </body> </html> <!--scope数据绑定 & --> <html> <head> <title>Zhiling App</title> <style> .ddd{ background-color: aqua; } .title{ background-color: aquamarine; cursor: pointer; } .body{ background-color: beige; } </style> </head> <body ng-app="ngApp"> <!--&绑定--> <div ng-controller="MyCtrl"> <greeting greet="sayHello(name)"></greeting> <greeting greet="sayHello(name)"></greeting> <greeting greet="sayHello(name)"></greeting> </div> <!--@绑定--> <div ng-controller="MyCtrl2"> <drink flavor="{{ctrlFlavor}}"></drink> </div> <!-- =绑定 --> <div ng-controller="MyCtrl3"> Ctrl: <br> <input type="text" ng-model="ctrFlav"> <br> Directive: <br> <drinp flav="ctrFlav"> </drinp> </div> <!--自定义指令--> <div ng-controller="SomeController"> <expander class="expander" expander-title="title"> {{text}} </expander> </div> <!--指令嵌套--> <div ng-controller="someController2"> <accordion> <expander2 ng-repeat="expander in expanders" expander-title="expander.title"> {{expander.text}} </expander2> </accordion> </div> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.js"></script> <script type="text/javascript"> var myModule=angular.module('ngApp', []); <!--&绑定--> myModule.controller('MyCtrl',['$scope',function ($scope) { $scope.sayHello=function (name) { alert("Hello "+name); } }]) myModule.directive("greeting",function () { return{ restrict:"AE", scope:{ //保证指令之间互不干扰 greet:'&'//传递一个来自父scope的函数,稍后调用(某个控制器中的函数) }, template:'<input type="text" ng-model="userName"/><br/>'+'<button ng-click="greet({name:userName})">Greeting</button></br>' } }); <!--@绑定--> myModule.controller('MyCtrl2',['$scope',function ($scope) { $scope.ctrlFlavor="百威"; }]) myModule.directive("drink",function () { return{ restrict:'AE', scope:{ flavor:'@'//自动绑定字符串 代替link函数 }, template:"<div>{{flavor}}</div>", // link:function (scope,element,attrs) { // scope.flavor=attrs.flavor; // } } }); <!--=绑定--> myModule.controller('MyCtrl3',['$scope',function ($scope) { $scope.ctrFlav="baishikeke" }]) myModule.directive("drinp",function () { return{ restrict:'AE', scope:{ flav:'='//双向数据绑定 }, template:'<input type="text" ng-model="flav">' } }); // 自定义指令 myModule.directive('expander',function () { return{ restrict:"EA", replace:true, transclude:true,//不覆盖之前有的内容 scope:{ title:'=expanderTitle' }, template:'<div><div class="title" ng-click="toggle()">{{title}}</div>'+ '<div class="body" ng-show="showMe" ng-transclude></div></div>',//ng-show显示和隐藏控制 link:function (scope,element,attrs) { scope.showMe=false; scope.toggle=function () { scope.showMe=!scope.showMe; } } } }); myModule.controller('SomeController',function ($scope) { $scope.title='点击展开'; $scope.text="这里是内容的部分。"; }); // 指令嵌套 myModule.directive('accordion',function () { return{ restrict:'EA', replace:true, transclude:true, template:'<div ng-transclude></div>', controller:function () { var expanders=[]; this.gotOpened=function (selectedExpander) { angular.forEach(expanders,function (expander) { if(selectedExpander!=expander){ expander.showMe=false; } }); } this.addExpander=function (expander) { expanders.push(expander); } } } }); myModule.directive('expander2',function () { return{ restrict:'EA', replace:true, transclude:true, require:'^?accordion', scope:{ title:'=expanderTitle' }, template:'<div><div class="title" ng-click="toggle()">{{title}}</div>'+ '<div class="body" ng-show="showMe" ng-transclude></div></div>', link:function (scope,element,attrs,accordionController) { scope.showMe=false; accordionController.addExpander(scope); scope.toggle=function toggle() { scope.showMe=!scope.showMe; accordionController.gotOpened(scope); } } } }); myModule.controller("someController2",function ($scope) { $scope.expanders=[{ title:'Click me to expand', text:'Hi there floks ,I am the content that was hidden but is now shown.' },{ title:'Clixk this', text:'I am even better text than you have seen previously' },{ title:'Test', text:'Test' } ] }) </script> </body> </html>
转载于:https://my.oschina.net/u/3161974/blog/1417318