发表于： 2016-08-12 23:28:43
0 2079
今天完成的事情：（学习指令以及其中scope的绑定，以及serves
明天计划的事情：（写js7
遇到的问题：（对指令中涉及dom操作部分的link，对指令间的调用以及与控制器的交互有些看不太懂
收获：（
var app=angular.module("MyModule",[]);
app.directive("hello",function()){
return{
restrict:'AEMC', //A:属性,E:元素,M:注释,C:class类默认:AE
template:'<div>Hi everyone</div>',
templateUrl:'hello.html'//当template有大量文本是在js中编写很麻烦,可以此时可以写成单独页面通过templateUrl引入
replace:true
}
})
应用<hello></hello>
当template内部需要添加内容时
<hello><div>添加内容</div></hello>时
<div>添加内容</div>实际无法显示出来
可以使用transclude:true,然后在模板template:'<div>Hi everyone</div>',中定义一个<div ng-transclude></div>
如template:'<div>Hi everyone<div ng-transclude></div></div>',
此时嵌套的<div>添加内容</div>会显示在<div ng-transclude></div>中
缓存注入:
myModule.run(function($templateCache){
$templateCache.put("hello.html","<div>Hello eneryone!!!</div>")
});
此方法在注册器加载完所有模块时执行一次,
使用时
app.directive("hello",function()){
return{
restrict:'AEMC', //A:属性,E:元素,M:注释,C:class类默认:AE
template:$templateCache.get("hello.html"),
replace:true
}
})
@:将当前属性当作字符串传递,可作为一种单向绑定
=:双向绑定
&:传递函数
html部分
<!doctype html>
<html ng-app="MyModule">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/bootstrap-3.0.0/css/bootstrap.css">
</head>
<body>
<div ng-controller="MyCtrl">
<input type="text" ng-model="ctrlFlavor">
<drink flavor="{{ctrlFlavor}}"></drink>
</div>
</body>
<script src="framework/angular-1.3.0.14/angular.js"></script>
<script src="ScopeAt.js"></script>
</html>
js部分
var myModule = angular.module("MyModule", []);
myModule.controller('MyCtrl', ['$scope', function($scope){
$scope.ctrlFlavor="百威";
}])
myModule.directive("drink", function() {
return {
restrict:'AE',
scope:{
flavor:'@'
},
// scopr.flaovr:'@',
template:"<input type='text' value={{flavor}}>"
// ,
// link:function(scope,element,attrs){
// scope.flavor=attrs.flavor;
// }
}
});
返回列表
评论