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

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 中将其视为选择的唯一选项：

<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。

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

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

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

有什么原因导致你的指令不能完成它在一个简单的链接函数中需要做的事情吗？