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

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从ngModel正确绑定.

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

编辑:这是一个小提琴.

Answer 1

你的代码有几个问题:

1.
根据有关自定义指令的孤立范围的文档:

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

_{(强调我的)}

这意味着您需要引用一个属性,该属性的值是您要共享的父作用域属性的名称.例如:

...
<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,ng-model属性是强制性的.您必须将其添加到模板字符串中:

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

3.
根据有关元素的相同文档select,ng-options属性的值必须具有您未能提供的指定表单之一(请参阅允许表单上的moe信息的文档).对于手头的简单情况,模板字符串可以像这样修改:

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

另见这个简短的演示.