Question

我正在尝试将属性指令添加到使用ng-options的选择中：

<select ng-model="item.Subcategory" ng-options="subcategory.Name as subcategory.Name for subcategory in GetSubcategories(item.Category)" monitor></select>

目前，它没有做任何有意义的事情：

angular.module("monitor", [])
.directive("monitor", function()
{
    var directive =
    {
        restrict: "A",
        scope:
        {
        },
        controller: function($scope)
        {
            console.log("I exist");
        }
    };

    return directive;
});

它似乎正在起作用的指令，因为我看到每个使用该指令的项目都存在“我存在”，但它选择失去了它的选项。

有了这个指令，我可以在HTML中看到这个作为select的唯一选项：

<option value="?" selected="selected"></option>

与此相反，当不使用指令时：

<option value="0" selected="selected">Cats</option>
<option value="1">Dogs</option>

为什么我的指令会破坏ng-options？

谢谢。

Answer 1

这里可能存在几个问题，其中任何一个都可能是导致问题的原因。

根据AngularJS Developer Guide on Directives：

如果同一元素上的多个指令请求新范围，则只创建一个新范围。

您正在指令上创建一个新的隔离范围，这可能会覆盖其他指令的范围，包括ng-options。

此外，您应该记住，controller参数创建了一个与其他指令共享的新控制器：

控制器构造函数。控制器在预链接阶段之前被实例化，并与其他指令共享（请参阅require属性）。这允许指令相互通信并增强彼此的行为。

除非您想使用您的指令与其他指令共享数据，否则您应该避免创建控制器。

有没有理由说明你的指令无法在简单的链接函数中完成它需要做的事情？

Angularjs - 将属性指令添加到选择clobbers ng-options

1 个答案: