指令 scope
<!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="utf-8"> <title></title> </head> <body> <div ng-controller="c1" ng-init="c11='c11'"> {{c11}} <div ng-controller="c2" ng-init="c21='c21'"> <div>{{c21}}</div> <div d2></div> <div ng-controller="c3" ng-init="c31='c31'"> <div>{{c31}}</div> <div d3></div> </div> </div> </div> <script src="angular.min.js"></script> <script> angular.module('myApp', []) .controller('c1', function($scope) { }) .controller('c2', function($scope) { }) .controller('c3', function($scope) { }) .directive('d3', function() { return { restrict: 'A', scope: false, // 默认 template: '<div>{{c11}} {{c21}} {{c31}}</div>', controller: function($scope, $element, $attrs, $transclude) { $scope.c31 = 'c31c' } }; }) .directive('d2', function() { return { restrict: 'A', scope: true, template: '<div>{{c11}} {{c21}}</div>', controller: function($scope, $element, $attrs, $transclude) { $scope.c21 = 'c21c' } }; }) </script> </body> </html>
@
<!DOCTYPE html> <html ng-app="dirAppModule"> <head> <title></title> <meta charset="utf-8"> <script src="angular.min.js"></script> <script type="text/ng-template" id="text.html"> <div> <h3 style="background-color:{{color}}" ng-transclude></h3> </div> </script> <script> var appModule = angular.module('dirAppModule', []); appModule.controller('bgColor',function($scope){}); appModule.directive('cdHello',function() { return { restrict:'EAC', templateUrl:'text.html', replace:true, transclude:'element', scope:{ color:'@colAttr' }, link:function(scope,ele,attrs,ctrl,trans) { ele.bind('click',function() { scope.$apply(function() { scope.color = '#C0DCC0'; }) }) ele.bind('mouseover',function() { ele.css({'cursor':'pointer'}) }) } } }) </script> </head> <body> <div ng-controller="bgColor"> <input ng-model="color" placeholder="请输入颜色值"/> <br/> <cd-hello col-attr="{{color}}"><span>code_bunny</span></cd-hello> </div> </body> </html>
=
@绑定是col-attr="{{color}}",而=绑定是bg-color="color".一个是"{{color}}",一个是"color".
<!DOCTYPE html> <html ng-app="dirAppModule"> <head> <title></title> <meta charset="utf-8"> <script src="angular.min.js"></script> <script type="text/ng-template" id="text.html"> <div> <h3 style="color:{{text_color}};background-color:{{color}}" ng-transclude></h3> </div> </script> <script> var appModule = angular.module('dirAppModule', []); appModule.controller('bgColor',function($scope){}); appModule.directive('cdHello',function(){ return { restrict:'EAC', templateUrl:'text.html', replace:true, transclude:'element', scope:{ color:'=bgColor' }, link:function(scope,ele,attrs,ctrl,trans){ ele.bind('click',function(){ scope.$apply(function(){ scope.color = '#C0DCC0' }) }); ele.bind('mouseover',function(){ ele.css({'cursor':'pointer'}) }); } } }); </script> </head> <body> <div ng-controller="bgColor"> <input ng-model="color" placeholder="请输入颜色值"/> <br/> <cd-hello bg-color="color"><span>code_bunny</span></cd-hello> </div> </body> </html>
