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

我没有找到任何关于如何告诉 Angular 深入检查我的模型的信息，所以我在源代码中更深入地研究了它是如何使用 ngModelController 完成的，我想如果我只用深度检查它会起作用。

我成功创建了 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" />

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

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

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

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

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

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

谢谢！

Answer 1

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

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

    scope: {
      names: '='
    }

这是等效代码的简写：

    scope: {
      names: '=names'
    }

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

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