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

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?
                }
            }
        }
    };
});

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() { ... });

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.

 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.

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.

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

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.