本文介绍了一个使用AngularJS创建的简单示例，演示了如何通过自定义指令与控制器进行数据交互，特别是如何利用双向数据绑定及控制器中的函数作为属性传递给指令。
<!doctype html>
<html ng-app='myApp'>
<head>
</head>
<body>
<script src="http://cdn.bootcss.com/angular.js/1.4.6/angular.js"></script>
<script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.js"></script>
<div ng-controller="listCtrl" ng-app="myApp">
<input type="text" ng-model="color">
<!-- <span kid hd-color="color"></span> --> <!--@是单项数据绑定，hd-color="{{color}}"作用域隔离，在view中是以模板“{{}}”的形式；=双向绑定，hd-color="color",在view中直接以属性的形式出现-->
<div kid color="callback()"></div>
</div>
<script type="text/javascript">
var myApp=angular.module('myApp',[]);
myApp.controller('listCtrl',function($scope){
$scope.color="red";
$scope.callback=function(){
return 'a web developer !';
}
});
myApp.directive('kid',function(){
return {
restrict:'AE',
//template:'<div style="color:{{color}}">@符号的学习</div>' ,
template:'<h1>{{color()}}</h1>',
scope:{ /*color:"=hdColor"*//* "@hdColor" */color:'&'} //通过&属性名来调用控制器的函数
}
});
</script>
</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
