发表于： 2017-05-28 22:02:58
1 1109
今天完成的事情：
把上下线的功能修改完成。
明天计划的事情：
完成任务10的全部功能。
遇到的困难：
1.之前虽然完成上下线功能，但是没有看相关约定，所以就全部重新修改了一遍。把2改成1，把1改成2；在修改的过程中由于有点地方没修改，导致点击上下线不能完成功能，后来修改完成之后就解决了。
2.对于退出功能，现在有了一个想法，可以试着用自定义指令去做，就可以不需要使用控制器了，这样就可以避免控制器之间的冲突。
3.对于编辑之后保存传值2次问题，这个目前还没有解决的方案。。。明天应该能解决吧。。。
收获：
学习自定义指令中的绑定策略$scope;
下面来介绍三种绑定策略的做法
1.@符号
“@”是通过DOM的属性来跟mytest控制器交互绑定一起
<div ng-controller="mytest"> |
<test></test> |
</div> |
app.controller("mytest", function ($scope) { |
$scope.name = "jack"; |
$scope.age = 25; |
}); |
app.directive("test",function(){ |
return { |
restrict : "E", |
template : '<div name="{{name}}"></div>', |
replace : true, |
scope : { |
name : "@" |
}, |
controller : function($scope){ |
console.log($scope.name); //"jack" |
console.log($scope.age); //age是undefined,因为没有跟mytest进行交互 |
}, |
link : function ($scope) { |
console.log($scope.name); //"jack" |
console.log($scope.age); //age是undefined,因为没有跟mytest进行交互 |
} |
} |
}); |
重点:
scope : {
name : “@”
}
scope对象声明了一个属性name,然后在DOM元素的属性加上一个name,(注意两边的名字必须要一致)这样就可以进行交互操作
点击查看完整代码
2.=符号
“=”有双重绑定的功能,比如mytest控制器与test子指令进行双重绑定(单个字符串、对象都是有效的)下面代码用对象来演示
<div ng-controller="mytest"> |
父：<input type="text" ng-model="data.name" /> |
<test></test> |
</div> |
app.controller("mytest", function ($scope) { |
$scope.data = { |
name : "jack", |
age : 25 |
} |
}); |
app.directive("test",function(){ |
return { |
restrict : "E", |
template : '<div data="data">子指令:<input ng-model="data.name" /></div>', |
replace : true, |
scope : { |
data : "=" |
}, |
controller : function($scope){ |
console.log($scope.data); //Object {name: "jack", age: 25} |
}, |
link : function ($scope) { |
console.log($scope.data); //Object {name: "jack", age: 25} |
} |
} |
}); |
3.&符号
“&”的意思是子指令能调用父控制器的方法,这里的指令template元素点击调用控制器的getName方法
<div ng-controller="mytest"> |
<test></test> |
</div> |
app.controller("mytest", function ($scope) { |
$scope.getName = function(){ |
console.log("jack"); |
} |
}); |
app.directive("test",function(){ |
return { |
restrict : "E", |
template : '<div get-name="getName()">子指令:<a href="javascript:void(0)" ng-click="getName()">点击调用父方法</a></div>', |
replace : true, |
scope : { |
getName : "&" |
}, |
controller : function($scope){ |
$scope.getName(); //"jack" |
}, |
link : function ($scope) { |
$scope.getName(); //"jack" |
} |
} |
}); |
返回列表
评论