[英]Access parent scope in angular directive with template
I woud like to reuse a form to edit one type of property. 我想重用表格来编辑一种类型的属性。 I have a list of editors:
我有一个编辑列表:
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"}
];
...
}
]);
Then I have a directive: 然后我有一条指令:
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;
}
}
});
Used as: 用作:
<div mapping-editor ng-model='content.mapping'></div>
With template content (relevant chunk): 带有模板内容(相关块):
<!-- 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>
...
This yields empty list – as if the mappingTypes
was empty. 这将产生一个空列表–好像
mappingTypes
为空。
The conent
from ngModel
is bound correctly. conent
的ngModel
已正确绑定。
How do I access kind-of-global (from one of the parent scopes) enumeration in a directive template? 如何在指令模板中访问全局(从父作用域之一)枚举? Or is there any other way to achieve this, such as defining the list differently instead of app $scope variable?
还是有其他方法可以实现此目的,例如以不同的方式定义列表而不是应用程序$ scope变量?
There were a couple of issues with your code: 您的代码有几个问题:
1. 1。
According to the docs regarding the isolated scope of custom directives: 根据有关定制指令隔离范围的文档 :
= or =attr - set up bi-directional binding between a local scope property and the parent scope property of name defined via the value of the attr attribute
=或= attr-在本地范围属性和通过attr属性值定义的名称的父范围属性之间建立双向绑定
(emphasis mine) (强调我的)
This means that you need to reference an attribute whose value is the name of the parent scope property you want to share. 这意味着您需要引用一个属性,该属性的值是要共享的父范围属性的名称。 Eg:
例如:
...
<editor ng-model="content" my-items="items"></editor>
...
scope: {
...
items: '=myItems'
},
Alternatively, you could do the binding in the directive;s link
function: 另外,您可以在指令的
link
函数中进行绑定:
...
<editor ng-model="content"></editor>
...
scope: {
content: 'ngModel'
// nothing `items` related here
},
...
link: function (scope, element, attrs) {
scope.items = scope.$parent.items;
}
2. 2。
According to the docs regarding the select
element, the ng-model
attribute is mandatory. 根据有关
select
元素的文档 , ng-model
属性是必需的。 You have to add it into your template string: 您必须将其添加到模板字符串中:
...
template:
...
'<select ng-model="selectedItem"...
3. 3。
According to the same docs regarding the select
element, the ng-options
attribute's value must have one of the specified forms, which you fail to provide (see the docs for moe info on the allowed forms). 根据与
select
元素相同的文档 , ng-options
属性的值必须具有您无法提供的指定格式之一(有关允许的格式的moe信息,请参阅文档)。 For the simple case at hand, the template string could be modified like this: 对于当前的简单情况,可以如下修改模板字符串:
...ng-options="item for item in items"...
\______/
|_____(you need to have a label)
See, also, this short demo . 另请参见此简短演示 。
Try to set the argument mapping-types
something like this 尝试像这样设置参数的
mapping-types
<div mapping-editor mapping-types='storeTypes' ng-model='content.mapping'></div>
If you set scope object in the directive, that means that this scope is isolated, and I'm not sure that you are able toe reach the parent scope. 如果您在指令中设置范围对象,则意味着该范围是隔离的,并且我不确定您是否能够到达父范围。 from the $parent object.
来自$ parent对象。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.