html input ng model,Angular自定义指令中传递ngModel

根据项目需要，希望写一个自定义指令，将指令中传递的数据(比如：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框中的数据清除。

总结：

唯一的修改就是将“@”绑定策略改成了“=”，然后将{{ }}移除。简单吧，/泪流满面……

可以参考博文：

欢迎评论指正，转载请标明出处。