Jak uzyskać dostęp do zakresu nadrzędnego z niestandardowej dyrektywy * z własnym zakresem * w AngularJS?

327

Szukam jakiegokolwiek sposobu dostępu do zakresu „nadrzędnego” w ramach dyrektywy. Jakakolwiek kombinacja zakresu, transkluzji, wymagania, przekazywania zmiennych (lub samego zakresu) z góry itp. Jestem całkowicie skłonny pochylić się do tyłu, ale chcę uniknąć czegoś całkowicie zhakowanego lub niemożliwego do utrzymania. Na przykład wiem, że mógłbym to zrobić teraz, pobierając parametry $scopez PreLink i iterując po swoich $siblingzakresach, aby znaleźć koncepcyjny „rodzic”.

To, czego naprawdę chcę, to mieć możliwość $watchwyrażenia w zakresie nadrzędnym. Jeśli mogę to zrobić, to mogę osiągnąć to, co próbuję tutaj zrobić: AngularJS - Jak renderować częściowy ze zmiennymi?

Ważną uwagą jest to, że dyrektywa musi być ponownie wykorzystywana w tym samym zakresie nadrzędnym. Dlatego domyślne zachowanie (zakres: fałsz) nie działa dla mnie. Potrzebuję indywidualnego zakresu dla każdej instancji dyrektywy, a następnie potrzebuję $watchzmiennej, która występuje w zakresie nadrzędnym.

Próbka kodu jest warta 1000 słów, więc:

app.directive('watchingMyParentScope', function() {
    return {
        require: /* ? */,
        scope: /* ? */,
        transclude: /* ? */,
        controller: /* ? */,
        compile: function(el,attr,trans) {
            // Can I get the $parent from the transclusion function somehow?
            return {
                pre: function($s, $e, $a, parentControl) {
                    // Can I get the $parent from the parent controller?
                    // By setting this.$scope = $scope from within that controller?

                    // Can I get the $parent from the current $scope?

                    // Can I pass the $parent scope in as an attribute and define
                    // it as part of this directive's scope definition?

                    // What don't I understand about how directives work and
                    // how their scope is related to their parent?
                },
                post: function($s, $e, $a, parentControl) {
                    // Has my situation improved by the time the postLink is called?
                }
            }
        }
    };
});
colllin
źródło

Odpowiedzi:

644

Zobacz Jakie są niuanse dziedziczenia prototypowego / prototypowego w AngularJS?

Podsumowując: sposób, w jaki dyrektywa uzyskuje dostęp do $parentzakresu nadrzędnego ( ), zależy od rodzaju zakresu, jaki tworzy ta dyrektywa:

  1. default ( scope: false) - dyrektywa nie tworzy nowego zakresu, więc nie ma tu dziedziczenia. Zakres dyrektywy jest taki sam, jak zakres nadrzędny / kontener. W funkcji łączenia użyj pierwszego parametru (zwykle scope).

  2. scope: true- dyrektywa tworzy nowy zakres potomny, który prototypowo dziedziczy z zakresu macierzystego. Właściwości zdefiniowane w zakresie nadrzędnym są dostępne w dyrektywie scope(z powodu dziedziczenia prototypowego). Uważaj tylko na zapis do prymitywnej właściwości scope - która utworzy nową właściwość w zakresie dyrektywy (która ukrywa / ukrywa właściwość zakresu nadrzędnego o tej samej nazwie).

  3. scope: { ... }- dyrektywa tworzy nowy zakres izolacji / izolacji. Nie dziedziczy prototypowo zakresu nadrzędnego. Nadal możesz uzyskać dostęp do zakresu nadrzędnego za pomocą $parent, ale zwykle nie jest to zalecane. Zamiast tego, należy określić zakres właściwości rodzic (i / lub funkcja) dyrektywy musi zostać przez dodatkowe atrybuty tego samego elementu, w którym jest stosowane w dyrektywie, za pomocą =, @i &notacji.

  4. transclude: true- dyrektywa tworzy nowy „transkoncepcyjny” zakres potomny, który prototypowo dziedziczy z zakresu macierzystego. Jeśli dyrektywa tworzy także zakres izolowany, zakresy transkludowane i izolowane są rodzeństwem. $parentWłasnością każdego zakresu odwołuje się do tego samego zakresu nadrzędnego.
    Aktualizacja kątowa 1.3 : Jeśli dyrektywa tworzy również zakres izolowany, zakres objęty jest teraz dzieckiem zakresu izolowanego. Przetworzone i izolowane zakresy nie są już rodzeństwem. $parentWłasność dołączany zakresu teraz odwołuje się do zakresu izolowanie.

Powyższy link zawiera przykłady i zdjęcia wszystkich 4 typów.

Nie można uzyskać dostępu do zakresu w funkcji kompilacji dyrektywy (jak wspomniano tutaj: https://github.com/angular/angular.js/wiki/Understanding-Directives ). Możesz uzyskać dostęp do zakresu dyrektywy w funkcji link.

Oglądanie:

Dla 1. i 2. powyżej: zwykle określasz, której właściwości nadrzędnej potrzebuje dyrektywa za pomocą atrybutu, a następnie $ obejrzyj:

<div my-dir attr1="prop1"></div>

scope.$watch(attrs.attr1, function() { ... });

Jeśli oglądasz właściwość obiektu, musisz użyć $ parsować:

<div my-dir attr2="obj.prop2"></div>

var model = $parse(attrs.attr2);
scope.$watch(model, function() { ... });

W przypadku 3. powyżej (izoluj zakres) obserwuj nazwę, którą nadajesz dyrektywie, używając notacji @lub =notacji:

<div my-dir attr3="{{prop3}}" attr4="obj.prop4"></div>

scope: {
  localName3: '@attr3',
  attr4:      '='  // here, using the same name as the attribute
},
link: function(scope, element, attrs) {
   scope.$watch('localName3', function() { ... });
   scope.$watch('attr4',      function() { ... });
Mark Rajcok
źródło
1
DZIĘKUJĘ, Mark. Okazuje się, że rozwiązanie, które zamieściłem w części Jak renderować częściowe ze zmiennymi, naprawdę działa całkiem pięknie. To, czego naprawdę potrzebujesz, aby mnie połączyć, to coś zatytułowanego „Niuanse pisania HTML i rozpoznawania, że ​​twój element nie jest zagnieżdżony w kontrolerze ng, jak myślisz”. Wow ... błąd żółtodzioba. Jest to jednak przydatny dodatek do twojej drugiej (znacznie dłuższej) odpowiedzi wyjaśniającej zakresy.
colllin
@collin, świetnie, cieszę się, że rozwiązałeś problem, ponieważ nie byłem całkiem pewien, jak odpowiedzieć na twój inny (teraz usunięty) komentarz.
Mark Rajcok
Jakie rzeczy mogę / powinnam wykonać w scope.$watch('localName3', function() { ...[?? WHAT TO DO HERE for example?] });
środku
1
@Andy, nie, nie używaj $parsez =: skrzypce . $parsejest potrzebny tylko w przypadku nieizolowanych zakresów.
Mark Rajcok
1
To świetna odpowiedź, bardzo dokładna. To także pokazuje, dlaczego po prostu nienawidzę pracy z AngularJS.
John Trichereau,
51

Dostęp do metody kontrolera oznacza dostęp do metody w zakresie nadrzędnym z dyrektywy kontroler / link / zakres.

Jeśli dyrektywa udostępnia / dziedziczy zakres nadrzędny, wówczas wystarczy wywołać metodę zakresu nadrzędnego.

Niewiele więcej pracy jest wymagane, aby uzyskać dostęp do metody zakresu nadrzędnego z zakresu izolowanej dyrektywy.

Istnieje kilka opcji (może być więcej niż wymienione poniżej), aby wywołać metodę zakresu nadrzędnego z zakresu izolowanych dyrektyw lub obserwować zmienne zakresu nadrzędnego ( specjalnie opcja 6 ).

Zauważ , że użyłem link functionw tych przykładach, ale możesz również użyć w directive controllerzależności od wymagań.

Opcja 1. Poprzez literał obiektu i z szablonu HTML

index.html

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="[email protected]" src="https://code.angularjs.org/1.3.9/angular.js" data-semver="1.3.9"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>

    <p> Directive Content</p>
    <sd-items-filter selected-items="selectedItems" selected-items-changed="selectedItemsChanged(selectedItems)" items="items"> </sd-items-filter>


    <P style="color:red">Selected Items (in parent controller) set to: {{selectedItemsReturnedFromDirective}} </p>

  </body>

</html>

itemfilterTemplate.html

<select ng-model="selectedItems" multiple="multiple" style="height: 200px; width: 250px;" ng-change="selectedItemsChanged({selectedItems:selectedItems})" ng-options="item.id as item.name group by item.model for item in items | orderBy:'name'">
  <option>--</option>
</select>

app.js

var app = angular.module('plunker', []);

app.directive('sdItemsFilter', function() {
  return {
    restrict: 'E',
    scope: {
      items: '=',
      selectedItems: '=',
      selectedItemsChanged: '&'
    },
    templateUrl: "itemfilterTemplate.html"
  }
})

app.controller('MainCtrl', function($scope) {
  $scope.name = 'TARS';

  $scope.selectedItems = ["allItems"];

  $scope.selectedItemsChanged = function(selectedItems1) {
    $scope.selectedItemsReturnedFromDirective = selectedItems1;
  }

  $scope.items = [{
    "id": "allItems",
    "name": "All Items",
    "order": 0
  }, {
    "id": "CaseItem",
    "name": "Case Item",
    "model": "PredefinedModel"
  }, {
    "id": "Application",
    "name": "Application",
    "model": "Bank"
    }]

});

działający plnkr: http://plnkr.co/edit/rgKUsYGDo9O3tewL6xgr?p=preview

Opcja 2. Poprzez literał obiektu i z linku / zakresu dyrektywy

index.html

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="[email protected]" src="https://code.angularjs.org/1.3.9/angular.js" data-semver="1.3.9"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>

    <p> Directive Content</p>
    <sd-items-filter selected-items="selectedItems" selected-items-changed="selectedItemsChanged(selectedItems)" items="items"> </sd-items-filter>


    <P style="color:red">Selected Items (in parent controller) set to: {{selectedItemsReturnedFromDirective}} </p>

  </body>

</html>

itemfilterTemplate.html

<select ng-model="selectedItems" multiple="multiple" style="height: 200px; width: 250px;" 
 ng-change="selectedItemsChangedDir()" ng-options="item.id as item.name group by item.model for item in items | orderBy:'name'">
  <option>--</option>
</select>

app.js

var app = angular.module('plunker', []);

app.directive('sdItemsFilter', function() {
  return {
    restrict: 'E',
    scope: {
      items: '=',
      selectedItems: '=',
      selectedItemsChanged: '&'
    },
    templateUrl: "itemfilterTemplate.html",
    link: function (scope, element, attrs){
      scope.selectedItemsChangedDir = function(){
        scope.selectedItemsChanged({selectedItems:scope.selectedItems});  
      }
    }
  }
})

app.controller('MainCtrl', function($scope) {
  $scope.name = 'TARS';

  $scope.selectedItems = ["allItems"];

  $scope.selectedItemsChanged = function(selectedItems1) {
    $scope.selectedItemsReturnedFromDirective = selectedItems1;
  }

  $scope.items = [{
    "id": "allItems",
    "name": "All Items",
    "order": 0
  }, {
    "id": "CaseItem",
    "name": "Case Item",
    "model": "PredefinedModel"
  }, {
    "id": "Application",
    "name": "Application",
    "model": "Bank"
    }]
});

działający plnkr: http://plnkr.co/edit/BRvYm2SpSpBK9uxNIcTa?p=preview

Opcja nr 3. Poprzez odniesienie do funkcji i szablon HTML dyrektywy

index.html

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="[email protected]" src="https://code.angularjs.org/1.3.9/angular.js" data-semver="1.3.9"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>

    <p> Directive Content</p>
    <sd-items-filter selected-items="selectedItems" selected-items-changed="selectedItemsChanged" items="items"> </sd-items-filter>


    <P style="color:red">Selected Items (in parent controller) set to: {{selectedItemsReturnFromDirective}} </p>

  </body>

</html>

itemfilterTemplate.html

<select ng-model="selectedItems" multiple="multiple" style="height: 200px; width: 250px;" 
 ng-change="selectedItemsChanged()(selectedItems)" ng-options="item.id as item.name group by item.model for item in items | orderBy:'name'">
  <option>--</option>
</select>

app.js

var app = angular.module('plunker', []);

app.directive('sdItemsFilter', function() {
  return {
    restrict: 'E',
    scope: {
      items: '=',
      selectedItems:'=',
      selectedItemsChanged: '&'
    },
    templateUrl: "itemfilterTemplate.html"
  }
})

app.controller('MainCtrl', function($scope) {
  $scope.name = 'TARS';

  $scope.selectedItems = ["allItems"];

  $scope.selectedItemsChanged = function(selectedItems1) {
    $scope.selectedItemsReturnFromDirective = selectedItems1;
  }

  $scope.items = [{
    "id": "allItems",
    "name": "All Items",
    "order": 0
  }, {
    "id": "CaseItem",
    "name": "Case Item",
    "model": "PredefinedModel"
  }, {
    "id": "Application",
    "name": "Application",
    "model": "Bank"
    }]
});

działający plnkr: http://plnkr.co/edit/Jo6FcYfVXCCg3vH42BIz?p=preview

Opcja nr 4. Poprzez odniesienie do funkcji oraz z linku / zakresu dyrektywy

index.html

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="[email protected]" src="https://code.angularjs.org/1.3.9/angular.js" data-semver="1.3.9"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>

    <p> Directive Content</p>
    <sd-items-filter selected-items="selectedItems" selected-items-changed="selectedItemsChanged" items="items"> </sd-items-filter>


    <P style="color:red">Selected Items (in parent controller) set to: {{selectedItemsReturnedFromDirective}} </p>

  </body>

</html>

itemfilterTemplate.html

<select ng-model="selectedItems" multiple="multiple" style="height: 200px; width: 250px;" ng-change="selectedItemsChangedDir()" ng-options="item.id as item.name group by item.model for item in items | orderBy:'name'">
  <option>--</option>
</select>

app.js

var app = angular.module('plunker', []);

app.directive('sdItemsFilter', function() {
  return {
    restrict: 'E',
    scope: {
      items: '=',
      selectedItems: '=',
      selectedItemsChanged: '&'
    },
    templateUrl: "itemfilterTemplate.html",
    link: function (scope, element, attrs){
      scope.selectedItemsChangedDir = function(){
        scope.selectedItemsChanged()(scope.selectedItems);  
      }
    }
  }
})

app.controller('MainCtrl', function($scope) {
  $scope.name = 'TARS';

  $scope.selectedItems = ["allItems"];

  $scope.selectedItemsChanged = function(selectedItems1) {
    $scope.selectedItemsReturnedFromDirective = selectedItems1;
  }

  $scope.items = [{
    "id": "allItems",
    "name": "All Items",
    "order": 0
  }, {
    "id": "CaseItem",
    "name": "Case Item",
    "model": "PredefinedModel"
  }, {
    "id": "Application",
    "name": "Application",
    "model": "Bank"
    }]

});

działający plnkr: http://plnkr.co/edit/BSqx2J1yCY86IJwAnQF1?p=preview

Opcja nr 5: Za pomocą modelu ng i powiązania dwukierunkowego można aktualizować zmienne zakresu nadrzędnego. . Dlatego w niektórych przypadkach może nie być konieczne wywołanie funkcji zakresu nadrzędnego.

index.html

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="[email protected]" src="https://code.angularjs.org/1.3.9/angular.js" data-semver="1.3.9"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>

    <p> Directive Content</p>
    <sd-items-filter ng-model="selectedItems" selected-items-changed="selectedItemsChanged" items="items"> </sd-items-filter>


    <P style="color:red">Selected Items (in parent controller) set to: {{selectedItems}} </p>

  </body>

</html>

itemfilterTemplate.html

<select ng-model="selectedItems" multiple="multiple" style="height: 200px; width: 250px;" 
 ng-options="item.id as item.name group by item.model for item in items | orderBy:'name'">
  <option>--</option>
</select>

app.js

var app = angular.module('plunker', []);

app.directive('sdItemsFilter', function() {
  return {
    restrict: 'E',
    scope: {
      items: '=',
      selectedItems: '=ngModel'
    },
    templateUrl: "itemfilterTemplate.html"
  }
})

app.controller('MainCtrl', function($scope) {
  $scope.name = 'TARS';

  $scope.selectedItems = ["allItems"];

  $scope.items = [{
    "id": "allItems",
    "name": "All Items",
    "order": 0
  }, {
    "id": "CaseItem",
    "name": "Case Item",
    "model": "PredefinedModel"
  }, {
    "id": "Application",
    "name": "Application",
    "model": "Bank"
    }]
});

działający plnkr: http://plnkr.co/edit/hNui3xgzdTnfcdzljihY?p=preview

Opcja # 6: Przez $watchi$watchCollection jest wiążąca dwukierunkowo itemswe wszystkich powyższych przykładach, jeśli elementy zostaną zmodyfikowane w zakresie nadrzędnym, elementy w dyrektywie również odzwierciedlą zmiany.

Jeśli chcesz oglądać inne atrybuty lub obiekty z zakresu nadrzędnego, możesz to zrobić za pomocą $watchi $watchCollectionjak podano poniżej

HTML

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="[email protected]" src="https://code.angularjs.org/1.3.9/angular.js" data-semver="1.3.9"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
  <p>Hello {{user}}!</p>
  <p>directive is watching name and current item</p>
  <table>
    <tr>
      <td>Id:</td>
      <td>
        <input type="text" ng-model="id" />
      </td>
    </tr>
    <tr>
      <td>Name:</td>
      <td>
        <input type="text" ng-model="name" />
      </td>
    </tr>
    <tr>
      <td>Model:</td>
      <td>
        <input type="text" ng-model="model" />
      </td>
    </tr>
  </table>

  <button style="margin-left:50px" type="buttun" ng-click="addItem()">Add Item</button>

  <p>Directive Contents</p>
  <sd-items-filter ng-model="selectedItems" current-item="currentItem" name="{{name}}" selected-items-changed="selectedItemsChanged" items="items"></sd-items-filter>

  <P style="color:red">Selected Items (in parent controller) set to: {{selectedItems}}</p>
</body>

</html>

skrypt app.js

var app = angular.module („plunker”, []);

app.directive('sdItemsFilter', function() {
  return {
    restrict: 'E',
    scope: {
      name: '@',
      currentItem: '=',
      items: '=',
      selectedItems: '=ngModel'
    },
    template: '<select ng-model="selectedItems" multiple="multiple" style="height: 140px; width: 250px;"' +
      'ng-options="item.id as item.name group by item.model for item in items | orderBy:\'name\'">' +
      '<option>--</option> </select>',
    link: function(scope, element, attrs) {
      scope.$watchCollection('currentItem', function() {
        console.log(JSON.stringify(scope.currentItem));
      });
      scope.$watch('name', function() {
        console.log(JSON.stringify(scope.name));
      });
    }
  }
})

 app.controller('MainCtrl', function($scope) {
  $scope.user = 'World';

  $scope.addItem = function() {
    $scope.items.push({
      id: $scope.id,
      name: $scope.name,
      model: $scope.model
    });
    $scope.currentItem = {};
    $scope.currentItem.id = $scope.id;
    $scope.currentItem.name = $scope.name;
    $scope.currentItem.model = $scope.model;
  }

  $scope.selectedItems = ["allItems"];

  $scope.items = [{
    "id": "allItems",
    "name": "All Items",
    "order": 0
  }, {
    "id": "CaseItem",
    "name": "Case Item",
    "model": "PredefinedModel"
  }, {
    "id": "Application",
    "name": "Application",
    "model": "Bank"
  }]
});

Zawsze możesz zapoznać się z dokumentacją AngularJs, aby uzyskać szczegółowe wyjaśnienia dotyczące dyrektyw.

Yogesh Manware
źródło
10
Ciężko pracuje dla swojego przedstawiciela ... tak ciężko dla swojego przedstawiciela ... ciężko pracuje dla swojego przedstawiciela, więc lepiej go głosuj dobrze.
szczupły
7
przegłosowano - wszelkie cenne informacje w odpowiedzi są niedostępne z powodu ich długości
zadośćuczynienie
2
Odpowiedziałem na pytanie wszystkimi dostępnymi alternatywami z wyraźnym podziałem. Moim zdaniem krótkie odpowiedzi nie zawsze są pomocne, dopóki nie masz przed sobą dużego obrazu.
Yogesh Manware,
@YogeshManware: Można go znacznie skrócić, pomijając nieistotne rzeczy, takie jak arkusze stylów, nie używając długich znaczników, upraszczając przykłady, aby nie używać rzeczy takich jak „grupuj według” itp. Byłoby to również bardzo przydatne z jakimś wyjaśnieniem każdy przykład.
cholera
To nie jest powód do odrzucania głosu. Ludzie nadużywają tej przywileju
Winnemucca
11
 scope: false
 transclude: false

i będziesz miał ten sam zakres (z elementem nadrzędnym)

$scope.$watch(...

Istnieje wiele sposobów uzyskania dostępu do zakresu nadrzędnego w zależności od tego zakresu i opcji.

Stepan Suworow
źródło
Tak, krótkie i słodkie i poprawne. Wydaje się, że mają ten sam zakres co element nadrzędny ... co uniemożliwia ich ponowne użycie w tym samym zakresie. jsfiddle.net/collindo/xqytH
colllin
2
wiele razy potrzebujemy izolowanego zakresu, gdy piszemy komponent wielokrotnego użytku, więc rozwiązanie nie jest takie proste
Yvon Huynh
8

Oto sztuczka, której użyłem kiedyś: utwórz dyrektywę „obojętną”, aby utrzymać zakres nadrzędny i umieścić go gdzieś poza pożądaną dyrektywą. Coś jak:

module.directive('myDirectiveContainer', function () {
    return {
        controller: function ($scope) {
            this.scope = $scope;
        }
    };
});

module.directive('myDirective', function () {
    return {
        require: '^myDirectiveContainer',
        link: function (scope, element, attrs, containerController) {
            // use containerController.scope here...
        }
    };
});

i wtedy

<div my-directive-container="">
    <div my-directive="">
    </div>
</div>

Może nie jest to najbardziej wdzięczne rozwiązanie, ale wykonało zadanie.

przybysz
źródło
4

Jeśli używasz klas i ControllerAsskładni ES6 , musisz zrobić coś nieco innego.

Zobacz fragment kodu poniżej i zauważ, że vmjest to ControllerAswartość kontrolera nadrzędnego stosowanego w nadrzędnym kodzie HTML

myApp.directive('name', function() {
  return {
    // no scope definition
    link : function(scope, element, attrs, ngModel) {

        scope.vm.func(...)
Simon H.
źródło
0

Po wypróbowaniu wszystkiego w końcu znalazłem rozwiązanie.

Wystarczy umieścić w szablonie następujące elementy:

{{currentDirective.attr = parentDirective.attr; ''}}

Po prostu zapisuje nadrzędny atrybut / zmienną zakresu, do którego chcesz uzyskać dostęp do bieżącego zakresu.

Zwróć także uwagę ; ''na końcu instrukcji, aby upewnić się, że szablon nie zawiera danych wyjściowych. (Angular ocenia każdą instrukcję, ale wypisuje tylko ostatnią).

Jest to trochę zuchwałe, ale po kilku godzinach prób i błędów robi to.

Jeffrey Roosendaal
źródło