Angular自定义指令中传递ngModel
根据项目需要，希望写一个自定义指令，将指令中传递的数据（比如：my-model="name"），绑定到template中的ng-model中，并且可以被外部作用域使用。
文章图片
【Angular自定义指令中传递ngModel】参考了《Angular权威指南》8.2节“向指令中传递数据”，看起来比较混乱，理解起来比较费力。同时也参考了其他博主的博文，但是依然未能达到预期目的。捣腾了大半天，终于搞定了。
解决方案
html:js:
.directive("myInput", function() {
return {
restrict: 'E',
replace: true,
template: '' +
'{{myAddon}}' +
'' +
'<\img src="https://www.it610.com/images/user/icon_delete.png" ng-click="myInput.delete()" class="icon-delete" width="16px" height="16px">' +
'',
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框中的数据清除。
总结：
唯一的修改就是将“@”绑定策略改成了“=”，然后将{{ }}移除。简单吧，/泪流满面……
可以参考博文：
- AngularJS在自定义指令中传递Model
- angularjs的自定义directive指令的绑定策略scope:”@”、”=”、”&”
推荐阅读
- SpringBoot调用公共模块的自定义注解失效的解决
- python自定义封装带颜色的logging模块
- angular2内置管道
- 列出所有自定义的function和view
- 动态组件与v-once指令
- Spring|Spring Boot 自动配置的原理、核心注解以及利用自动配置实现了自定义 Starter 组件
- 自定义MyAdapter
- Android自定义view实现圆环进度条效果
- Flutter自定义view|Flutter自定义view —— 闯关进度条
- js保留自定义小数点