Question

我想重用一个表单来编辑一种类型的属性。我有一个编辑列表：

ModelerControllers.controller('ModelController', ['$rootScope', '$scope', '$http', '$q',
    function ($rootScope, $scope, $http, $q) {
        ...
        $scope.mappingTypes = [
            {"name": "mixpanel", "label": "Mixpanel"},
            {"name": "mongo", "label": "Mongo"},
            {"name": "slicer", "label": "Slicer"},
            {"name": "sql", "label": "SQL"}, 
            {"name": "", "label": "Other"}
        ];
        ...
    }
]);

然后我有一个指令：

CubesModelerApp.directive("mappingEditor", function() {
    return {
        templateUrl: 'views/partials/mapping.html',
        require: "ngModel",
        scope: {
            content: "=ngModel",
            mappingTypes: "@mappingTypes"
        },
        link: function($scope, $element, $attrs) {
            $scope.mappingTypes = $scope.$parent.mappingTypes;
        }
    }
});

用作：

<div mapping-editor ng-model='content.mapping'></div>

使用模板内容（相关块）：

<!-- language: html -->

...
<select class="form-control"
        ng-change="mappingTypeChanged(storeType)"
        ng-model="storeType"
        ng-options="f.name as f.label for f in mappingTypes">
</select>
...

这会产生空列表 - 好像mappingTypes为空。

来自conent的{{1}}绑定正确。

如何在指令模板中访问全局类型（来自其中一个父作用域）枚举？或者有没有其他方法来实现这一点，例如以不同的方式定义列表而不是app $ scope variable？

编辑：这是fiddle。

Answer 1

您的代码存在一些问题：

<强> 1
根据 the docs ，关于自定义指令的孤立范围：

=或= attr - 设置本地范围属性与通过attr属性值定义的名称的父范围属性之间的双向绑定

_{（强调我的）}

这意味着您需要引用一个属性，该属性的值是您要共享的父作用域属性的名称。 E.g：

...
<editor ng-model="content" my-items="items"></editor>

...
scope: {
    ...
    items: '=myItems'
},

或者，您可以在指令中执行绑定; s link函数：

...
<editor ng-model="content"></editor>

...
scope: {
    content: 'ngModel'
    // nothing `items` related here
},

...
link: function (scope, element, attrs) {
    scope.items = scope.$parent.items;
}

<强> 2
根据关于select元素的 the docs ，ng-model属性是必需的。您必须将其添加到模板字符串中：

...
template:
    ...
    '<select ng-model="selectedItem"...

第3
根据关于select元素的 the same docs ，ng-options属性的值必须具有您未能提供的指定表单之一（请参阅moe的文档）关于允许表格的信息）。对于手头的简单情况，模板字符串可以像这样修改：

...ng-options="item for item in items"... \______/ |_____(you need to have a label)

另请参阅此 short demo 。

Answer 2

尝试将参数mapping-types设置为类似

<div mapping-editor mapping-types='storeTypes' ng-model='content.mapping'></div>

如果在指令中设置范围对象，则表示此范围是隔离的，并且我不确定您是否能够访问父范围。来自$ parent对象。

使用模板访问angular指令中的父作用域

2 个答案: