Question

这是我的问题：我有一个控件，我想在AngularJS中使用它作为属性指令（实际上我有更多，但现在只需坚持一个），就像模型指令一样。我在文档中看到了一些例子，并尝试编写我的指令。

例如：

<input type="text" my-datepicker ng-model="appointment" />

这很好用，但是当我尝试使用数组类型时会出现问题。我进行了调试以查看导致问题的原因，并在遇到此类问题后搜索了文档。

以下是我首先尝试的方式：

.directive('myAnything', function(){
return {
    restrict: 'A',
    require: '?ngModel', // get a hold of NgModelController
    link: function (scope, element, attrs, ngModel) {
        if (!ngModel) return; // do nothing if no ng-model

        // initialize my control on the element
        // ...

        // Specify how UI should be updated
        ngModel.$render = render;

        // Listen for change events to enable binding
        element.on('change', function () {
            scope.$apply(read);
        });
        read();

        function read() {
            // read from controll, write to model
            // ngModel.$setViewValue([{text:'test'},{text:'test2'},{text:'test3'}]);
        }
        function render() {
            if (ngModel.$modelValue) {
                // update controller form model - render
                // ...
            }
        }
    }
};
});

由于我是AngularJS的新手，我不确定我的理解是否正确。到目前为止我想出的是当angular检查更改时，它不会对数组进行深入检查，因此我的渲染函数不会被调用。以下是演示这一点的小提琴：demo

我没有找到任何关于如何告诉角度深入检查我的模型的内容，所以我在源代码中更深入地了解如何使用ngModelController完成，我想如果我使用ngModelController创建一个基本控制器深入检查它会起作用。

我成功创建了myModelController，就像ngModelController一样，我通过将第三个参数传递给深度检查来进行$ watch调用。

$scope.$watch(function myModelWatch() {
                var value = ngModelGet($scope);
                if (!angular.equals(ctrl.$modelValue, value)) {
                    ctrl.$modelValue = value;
                    ctrl.$render();
                }
                return ctrl.$modelValue;
            },
                function (newValue, oldValue) {
                    if (!angular.equals(newValue, oldValue)) {
                        ctrl.$render();
                    }
                },
                true
             );

这比第一个解决方案更有效，因为我可以在没有像这样的ngModel指令的情况下使用它（也更优雅）：

<input type="text" my-anything="listofappointments" />

直到我将该指令应用于另一个输入，然后将它们都绑定到最后一个模型属性之后，这才一直有效。

<input type="text" my-anything="secondList" />

我调试了这一点，我发现在angular中调用的指令的setter有一个参数（ident），它被设置为secondList（我在页面上的最后一个模型属性）。

我的问题是，我有什么选择？也许我没有在文档中注意到如何做到这一点？这看起来像一个简单的场景...或者我可能需要更深入地了解如何在角度上实现这一点？我的方法对这个问题有好处吗？

我将不胜感激任何评论或建议！如果第二种方法是可行的，我想坚持下去，因为它显然更优雅和用户友好（没有ng模型），但如果没有，另一种方法也会很好。

顺便说一句，我使用的角度v1.0.8显然是稳定的版本。（但我也不坚持）

谢谢！

Answer 1

我在这里有几个建议。首先，我认为你通过避免ngModel走在正确的轨道上。如果使用指令作为元素然后使用属性指定数组，则可以更进一步。我怀疑之前会出现这种情况，我相信this answer会对你有用。这里有一个Plunker example，它演示了简洁地使用数组的概念。

您描述的最后一个问题在AngularJS中很常见。当您尝试重新使用指令而不隔离其范围时，会发生这种情况。 AngularJS directive guide在“隔离指令的范围”部分中很好地解释了这个概念。我链接到上面的Plunker片段确实将范围与指令定义的这一部分隔离开来：

    scope: {
      names: '='
    }

这是此等效代码的简写：

    scope: {
      names: '=names'
    }

这意味着：“设置一个隔离范围，其中 names 变量绑定到我的指令元素的 names 属性。”

这样，你的指令的每个实例都有自己的范围，你将不会遇到你在测试中看到的冲突。

为数组创建AngularJS指令，如ngModel

1 个答案: