发表于： 2017-01-19 02:26:14
3 1498
今天完成的事情：
学习了angular的自定义指令下面是个一个小demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="somecontroller">
{{title}}
<expander class="expander" qq="{{title}}"> // 因为@绑定的是属性的值 这里是传入了父级的scope值
{{text}}
</expander>
</div>
<script>
angular.module('myApp',[])
.controller('somecontroller',function($scope){
$scope.text="hi nihao"
$scope.title="clickme";
})
angular.module('myApp')
.directive('expander',function(){
return{
restrict:'EA',
replace:'true',
transclude:true, //作用是把把原来的元素中的内容移到我们所提供的模板中
scope:{title:'@qq'}, //@后面的是绑定的是属性的名字 绑定了这个属性的值
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){
scope.showMe=false;
scope.toggle=function toggle(){
scope.title=1111111111;
scope.showMe = !scope.showMe;
}
}
}
})
</script>
</body>
</html>
=是双向绑定了父scope的属性所以在子scope改变了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="somecontroller">
{{title}}
<expander class="expander" qq="{{title}}"> // 因为@绑定的是属性的值 这里是传入了父级的scope值
{{text}}
</expander>
</div>
<script>
angular.module('myApp',[])
.controller('somecontroller',function($scope){
$scope.text="hi nihao"
$scope.title="clickme";
})
angular.module('myApp')
.directive('expander',function(){
return{
restrict:'EA',
replace:'true',
transclude:true, //作用是把把原来的元素中的内容移到我们所提供的模板中
scope:{title:'@qq'}, //@后面的是绑定的是属性的名字 绑定了这个属性的值
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){
scope.showMe=false;
scope.toggle=function toggle(){
scope.title=1111111111;
scope.showMe = !scope.showMe;
}
}
}
})
</script>
</body>
</html>
=是双向绑定了父scope的属性所以在子scope改变了
明天计划的事情：继续学习 自定义指令
遇到的问题：=是怎么绑定属性的？
返回列表
评论