美文网首页
Angular自定义指令中传递ngModel

Angular自定义指令中传递ngModel

作者: 疾风劲草ccy | 来源:发表于2017-03-16 15:23 被阅读358次

    根据项目需要,希望写一个自定义指令,将指令中传递的数据(比如:my-model="name"),绑定到template中的ng-model中,并且可以被外部作用域使用。



    参考了《Angular权威指南》8.2节“向指令中传递数据”,看起来比较混乱,理解起来比较费力。同时也参考了其他博主的博文,但是依然未能达到预期目的。捣腾了大半天,终于搞定了。

    解决方案

    html:
    <div my-input my-addon="test1" my-model="user.test1" my-placeholder="it's test1"></div>
    <div my-input my-addon="test2" my-model="user.test2" my-placeholder="it's test2" my-maxlength="11"></div>
    
    js:
    .directive("myInput", function() {
        return {
            restrict: 'E',
            replace: true,
            template: '<div class="input-group">' +
                '<span class="input-group-addon">{{myAddon}}</span>' +
                '<input class="form-control" type="text" ng-model="myModel" ng-change="myInput.watch()" placeholder="{{myPlaceholder}}" maxlength="{{myMaxlength}}">' +
                '<span class="input-group-addon"><\img src="/images/user/icon_delete.png" ng-click="myInput.delete()" class="icon-delete" width="16px" height="16px"></span>' +
                '</div>',
            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框中的数据清除。

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

    可以参考博文:

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

    相关文章

      网友评论

          本文标题:Angular自定义指令中传递ngModel

          本文链接:https://www.haomeiwen.com/subject/cyxjnttx.html