<!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>