带有ng-repeat作为自包含内容的自定义指令

Daniel Olszewski 发表于 Dev

丹尼尔·奥尔瑟夫斯基（Daniel Olszewski）

我正在处理包装多选jQuery插件的指令。我的目标是将以下HTML转换为动态多选：

<select multiselect multiple ng-model="selected">
    <option>Static option 1</option>
    <option>Static option 2</option>
    <option ng-repeat="value in values">{{value}}</option>
</select>

请注意，可以直接添加选项，也可以使用ng-repeat迭代动态选项。

这是我编写指令的方式：

app.directive('multiselect', function () {
    return {
        restrict: 'A',
        scope: {
            model: '='
        },
        transclude: true,
        require: 'ngModel',
        link: function (scope, element, attrs, controller, transclude) {
            transclude(function (clone) {
                element.append(clone);
                $(element).multiselect();
            });
        }
    };
});

问题在于，虽然该指令有效并且用jQuery multiselect插件替换HTML，但它仅显示静态提供的选项。使用ng-repeat创建的选项不会显示在插件中，即使可以在Angular呈现的HTML源代码中看到它们也是如此。在插件创建multiselect之后，似乎将transclude克隆附加到了元素上。

这是重现此问题的JSFiddle。

我的理解正确吗？这种现象的可能原因是什么？

亚伦·史威默（Yaron Schwimmer）

我不知道为什么你的方式不起作用，但更换option标签+ngRepeat与ngOptions似乎做的伎俩。

<select multiselect multiple ng-model="selected" ng-options="value for value in values">
  <option>Static option 1</option>
  <option>Static option 2</option>  
</select>

工作中的JSFiddle

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。