javascript - 为数组创建像 ngModel 这样的 AngularJS 指令

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 检查更改时，它不会对数组进行深入检查，因此不会调用我的渲染函数。 这是一个证明这一点的 fiddle :demo

我没有找到任何关于如何让 angular 深入检查我的模型的信息，所以我在源代码中更深入地了解了它是如何使用 ngModelController 完成的，我想如果我制作一个像 ngModelController 这样的基本 Controller 深入检查它会起作用。

我成功创建了 myModelController，就像 ngModelController 一样，只是 $watch 调用是由我将第三个参数 true 传递给深度检查。

$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" />

这再次起作用，直到我将该指令应用于另一个输入，之后它们都绑定(bind)到最后一个模型属性。

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

我也对此进行了调试，发现以 Angular 调用的指令的 setter 有一个参数 (ident)，该参数设置为 secondList(我在页面上拥有的最后一个模型属性)。

我的问题是，我在这里有哪些选择？也许我没有在文档中注意到如何做到这一点？这看起来像一个简单的场景......或者我可能需要更深入地了解这是如何以 Angular 完成的？我的方法对这个问题是否有效？

如有任何意见或建议，我将不胜感激!如果第二种方法可行，我会坚持使用它，因为它显然更加优雅和用户友好(没有 ng-model)，但如果不行，另一种也不错。

顺便说一句，我使用的是 angular v1.0.8，这显然是稳定版本。 (但我也不坚持)

谢谢!

Answer 1

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

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

    scope: {
      names: '='
    }

这是等效代码的简写:

    scope: {
      names: '=names'
    }

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

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