根据项目需要,希望写一个自定义指令,将指令中传递的数据(比如:my-model="name"),绑定到template中的ng-model中,并且可以被外部作用域使用。
参考了《Angular权威指南》8.2节“向指令中传递数据”,看起来比较混乱,理解起来比较费力。同时也参考了其他博主的博文,但是依然未能达到预期目的。捣腾了大半天,终于搞定了。
解决方案
html:
js:
.directive("myInput", function() {
return {
restrict: 'E',
replace: true,
template: '
'{{myAddon}}' +
'' +
'' +
'
scope: {
myAddon: '@',
myModel: '=', // 重点:如果需要跟外部作用域通信,需要改成“=”,template中的myModel不可用{{ }}
myPlaceholder: '@',
myMaxlength: '@'
},
controller: function($scope, $element) {
$scope.myInput = {
"watch": function() {
var val = $element.find("input").val();
console.log($element.find("input").val());
$scope.myModel = val;
console.log($scope.myAddon)
},
"delete": function() {
$scope.myModel = '';
$element.find("input").val('');
}
}
}
}
})
效果图
Chrome Element
$scope.user.test1、$scope.user.test2 直接可以在 controller 中获取和修改。
实现的效果为:点击删除按钮,可以将input框中的数据清除。
总结:
唯一的修改就是将“@”绑定策略改成了“=”,然后将{{ }}移除。简单吧,/泪流满面……
可以参考博文:
欢迎评论指正,转载请标明出处。