具有双向约束力和NG-变化AngularJS指令 [英] AngularJS directive with two-way binding and ng-change

问题描述

我所遇到的一个情况我需要改变的基础上下拉的设定值的输入框的输入类型。换句话说，如果从下拉菜单中用户选择字符串，然后输入的类型应该是文本，等等。我决定创建一个指令，因为我还在学习角也让我不要复制块code所有的地方（我需要不止一次本以上）。

I have come across a situation where I need to change the input type of an input box based on the selected value of a dropdown. In other words, if the user selects 'String' from the dropdown then the type of the input should be 'text', etc. I decided to create a directive cuz I'm still learning Angular but also so I don't copy blocks of code all over the place (I need this more than once).

这是我尝试的内容：

(function () {
    "use strict";

    angular
        .module('app')
        .directive('dynamicTypeInput', dynamicTypeInput);

    function dynamicTypeInput() {
        return {
            replace: true,
            restrict: 'AE',
            require: ['ngModel', '^form'],
            scope: {type: '=', placeholder: '@'},
            templateUrl: 'app/common/dynamic-type-input/dynamic-type-input.tpl.html',
            link : function(scope, element, attrs, ngModel){

                //Watch for changes to ngModel, update scope.inputValue
                scope.$watch(function(){
                    return ngModel[0].$modelValue;
                }, function (value){
                    scope.inputValue = value;
                });

                //Watch inputValue, update the model
                scope.$watch('inputValue', function(value){
                    ngModel[0].$setViewValue(value);
                });

                //Setup ng-change
                if (attrs.ngChange) {
                    ngModel[0].$viewChangeListeners.push(function () {
                        scope.$eval(attrs.ngChange);
                    });
                }
            }
        };
    }
})();

请注意：模板是一个简单的 NG-开关的选择基础上的价值相应的输入框中输入 scope.type 和输入的所有绑定到 scope.inputValue 。

Note: The template is simply an ng-switch that selects the appropriate input box based on the value of scope.type and the inputs all bind to scope.inputValue.

我使用的答案<一个href=\"https://stackoverflow.com/questions/24754005/how-to-implement-an-ng-change-for-a-custom-directive\">this SO问题帮我补充补充的NG-改变属性和正确触发的能力。根据这个问题的答案我需要从孤立的范围中删除ngModel，我不知道为什么，这是必需的但，如果有人可以解释它，我会很感激。

I used the answer from this SO question to help me add the ability to add an ng-change attribute and fire correctly. According to that answer I needed to remove the ngModel from the isolated scope, I'm not sure why this is required but, if someone could explain it I'd be grateful.

从隔离范围中删除ngModel变得更加困难实例化指令与初始值或指令更新时模型在主控制器改变，因此现在我看 ngModel [0] $ modelValue 和更新本地的值，如果它的变化。

Removing ngModel from the isolated scope made it more difficult to instantiate directive with an initial value or have the directive update when the model is changed in the main controller so now I watch ngModel[0].$modelValue and update the local value if it changes.

虽然该指令工作和做什么，我希望它做的，但一切似乎有点令人费解，效率低下，有没有办法，我可以实现我想要在一个更简单的方式？

While the directive works and does what I expect it do but it all seems a bit convoluted and inefficient, is there no way I can achieve what I want in a more simple manner?

推荐答案

使用第二个答案的SO问题引用我固定需要从分离的范围，以获得ngChange工作除去ngModel的问题。这简化了指令，我可以使用双向绑定原样。

Using the second answer to the SO question referenced I fixed the problem of needing to remove ngModel from the isolated scope in order to get ngChange to work. This simplified the directive and I can use two-way binding as is.

最后的指令：

(function () {
    "use strict";

    angular
        .module('app')
        .directive('dynamicTypeInput', dynamicTypeInput);

    dynamicTypeInput.$inject = ['$timeout'];

    function dynamicTypeInput($timeout) {
        return {
            replace: true,
            restrict: 'AE',
            require: ['ngModel', '^form'],
            scope: {ngModel: '=', type: '=', placeholder: '@', ngChange: "&"},
            templateUrl: 'app/common/dynamic-type-input/dynamic-type-input.tpl.html',
            link: function (scope, element, attrs, ngModel) {

                scope.$watch('ngModel', function () {
                    $timeout(scope.ngChange);
                });

            }
        };
    }
})();

这篇关于具有双向约束力和NG-变化AngularJS指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！