javascript - Access parent scope in angular directive with template - Stack Overflow

admin管理员组

文章数量:1393114

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.

The conent from ngModel is bound correctly.

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?

EDIT: Here is a fiddle.

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.

The conent from ngModel is bound correctly.

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?

EDIT: Here is a fiddle.

• javascript
• angularjs

Share Improve this question Follow edited Jan 3, 2014 at 16:15 Stiivi asked Jan 2, 2014 at 14:25 StiiviStiivi 2,09722 gold badges1616 silver badges2727 bronze badges 2

• A fiddle tends to result in more/quicker/better answers... – gkalpak Commented Jan 2, 2014 at 16:08
• Here is a fiddle: jsfiddle/Stiivi/4ZZbs – Stiivi Commented Jan 3, 2014 at 16:13

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

There were a couple of issues with your code:

---

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

_{(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. E.g.:

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

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

Alternatively, you could do the binding in the directive;s link function:

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

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

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

---

2.
According to the docs regarding the select element, the ng-model attribute is mandatory. You have to add it into your template string:

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

---

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). 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

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

本文标签： javascriptAccess parent scope in angular directive with templateStack Overflow