Bagaimana cara mengakses lingkup induk dari dalam direktif khusus * dengan cakupan sendiri * di AngularJS?

Saya mencari cara apa pun untuk mengakses ruang lingkup "induk" dalam arahan. Kombinasi ruang lingkup, transclude, memerlukan, meneruskan variabel (atau cakupan itu sendiri) dari atas, dll. Saya benar-benar ingin membungkuk ke belakang, tetapi saya ingin menghindari sesuatu yang benar-benar hacky atau tidak dapat dipertahankan. Sebagai contoh, saya tahu saya bisa melakukannya sekarang dengan mengambil $scopedari parameter preLink dan mengulangi $siblingcakupannya untuk menemukan "induk" konseptual.

Yang benar-benar saya inginkan adalah bisa $watchberekspresi di lingkup orang tua. Jika saya bisa melakukan itu, maka saya dapat mencapai apa yang saya coba lakukan di sini: AngularJS - Bagaimana cara membuat sebagian dengan variabel?

Catatan penting adalah bahwa arahan harus dapat digunakan kembali dalam lingkup induk yang sama. Karenanya perilaku default (lingkup: false) tidak berfungsi untuk saya. Saya membutuhkan ruang lingkup individu per instance dari direktif, dan kemudian saya perlu $watchvariabel yang hidup dalam lingkup induk.

Contoh kode bernilai 1000 kata, jadi:

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

Lihat Apa nuansa lingkup prototipal / warisan prototipikal di AngularJS?

Untuk meringkas: cara direktif mengakses $parentruang lingkup induknya ( ) tergantung pada jenis ruang lingkup direktif menciptakan:

1. default ( scope: false) - arahan tidak membuat ruang lingkup baru, jadi tidak ada warisan di sini. Ruang lingkup direktif adalah ruang lingkup yang sama dengan induk / wadah. Dalam fungsi tautan, gunakan parameter pertama (biasanya scope).

2. scope: true- Arahan menciptakan ruang lingkup anak baru yang secara prototipe mewarisi dari ruang lingkup orang tua. Properti yang didefinisikan pada ruang lingkup induk tersedia untuk direktif scope(karena warisan prototypal). Berhati-hatilah saat menulis ke properti lingkup primitif - yang akan membuat properti baru pada cakupan direktif (yang menyembunyikan / membayangi properti lingkup induk dengan nama yang sama).

3. scope: { ... }- Arahan menciptakan ruang lingkup isolat / terisolasi baru. Ini tidak mewarisi ruang lingkup induk. Anda masih dapat mengakses lingkup induk menggunakan $parent, tetapi ini biasanya tidak disarankan. Sebaliknya, Anda harus menentukan orang tua lingkup properti (dan / atau fungsi) kebutuhan direktif melalui atribut tambahan pada elemen yang sama di mana direktif yang digunakan, menggunakan =, @dan &notasi.

4. transclude: true- arahan menciptakan ruang lingkup anak baru "yang ditransklusikan", yang secara purwarupa diwarisi dari ruang lingkup orang tua. Jika direktif juga menciptakan ruang lingkup isolat, ruang lingkup yang ditransklusikan dan ruang lingkup adalah saudara kandung. The $parentmilik masing-masing lingkup referensi lingkup induk yang sama.
   Pembaruan sudut v1.3 : Jika direktif juga menciptakan ruang lingkup isolat, ruang lingkup yang ditransklusikan sekarang adalah anak dari ruang lingkup isolat. Ruang lingkup yang ditransklusikan dan diisolasi bukan lagi saudara kandung. The $parentmilik lingkup ditransklusikan sekarang referensi lingkup isolat.

Tautan di atas memiliki contoh dan gambar dari semua 4 jenis.

Anda tidak dapat mengakses ruang lingkup dalam fungsi kompilasi direktif (sebagaimana disebutkan di sini: https://github.com/angular/angular.js/wiki/Understanding-Directives ). Anda dapat mengakses ruang lingkup direktif dalam fungsi tautan.

Menonton:

Untuk 1. dan 2. di atas: biasanya Anda menentukan properti induk mana yang direktif perlu melalui atribut, lalu $ tonton:

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

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

Jika Anda menonton properti objek, Anda harus menggunakan $ parse:

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

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

Untuk 3. di atas (ruang lingkup isolat), menonton nama yang Anda berikan properti direktif menggunakan @atau =notasi:

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

Mengakses metode pengontrol berarti mengakses metode pada lingkup induk dari pengontrol direktif / tautan / cakupan.

Jika arahan berbagi / mewarisi ruang lingkup induk maka cukup mudah untuk hanya memanggil metode lingkup induk.

Dibutuhkan lebih banyak pekerjaan ketika Anda ingin mengakses metode lingkup induk dari lingkup direktif terisolasi.

Ada beberapa opsi (mungkin lebih dari yang tercantum di bawah) untuk memanggil metode lingkup induk dari lingkup arahan terisolasi atau menonton variabel lingkup induk ( opsi # 6 khusus).

Perhatikan bahwa saya menggunakan link functioncontoh-contoh ini tetapi Anda dapat menggunakan adirective controller juga berdasarkan persyaratan.

Pilihan 1. Melalui Objek literal dan dari template html direktif

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="angular.js@1.3.x" 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"
    }]

});

working plnkr: http://plnkr.co/edit/rgKUsYGDo9O3tewL6xgr?p=preview

Pilihan 2. Melalui Object literal dan dari directive link / scope

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="angular.js@1.3.x" 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"
    }]
});

plnkr berfungsi: http://plnkr.co/edit/BRvYm2SpSpBK9uxNIcTa?p=preview

Opsi # 3. Melalui referensi Fungsi dan dari template html direktif

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="angular.js@1.3.x" 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"
    }]
});

working plnkr: http://plnkr.co/edit/Jo6FcYfVXCCg3vH42BIz?p=preview

Opsi # 4. Melalui referensi Fungsi dan dari tautan / lingkup direktif

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="angular.js@1.3.x" 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"
    }]

});

working plnkr: http://plnkr.co/edit/BSqx2J1yCY86IJwAnQF1?p=preview

Opsi # 5: Melalui ng-model dan pengikatan dua arah, Anda dapat memperbarui variabel lingkup induk. . Jadi, Anda mungkin tidak perlu menjalankan fungsi lingkup induk dalam beberapa kasus.

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="angular.js@1.3.x" 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"
    }]
});

plnkr berfungsi: http://plnkr.co/edit/hNui3xgzdTnfcdzljihY?p=preview

Opsi # 6: Melalui $watchdan$watchCollection Ini adalah dua cara mengikatitems semua contoh di atas, jika item dimodifikasi dalam lingkup induk, item dalam direktif juga akan mencerminkan perubahan.

Jika Anda ingin menonton atribut atau objek lain dari lingkup induk, Anda dapat melakukannya menggunakan $watchdan$watchCollection seperti yang diberikan di bawah ini

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="angular.js@1.3.x" 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>

skrip 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"
  }]
});

Anda selalu dapat merujuk dokumentasi AngularJs untuk penjelasan terperinci tentang arahan.

 scope: false
 transclude: false

dan Anda akan memiliki cakupan yang sama (dengan elemen induk)

$scope.$watch(...

Ada banyak cara bagaimana mengakses lingkup induk tergantung pada dua opsi lingkup ini & transclude.

Berikut adalah trik yang saya gunakan sekali: buat arahan "dummy" untuk memegang ruang lingkup induk dan letakkan di suatu tempat di luar arahan yang diinginkan. Sesuatu seperti:

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

lalu

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

Mungkin bukan solusi yang paling anggun, tapi itu menyelesaikan pekerjaan.

Jika Anda menggunakan Kelas dan ControllerAssintaks ES6 , Anda perlu melakukan sesuatu yang sedikit berbeda.

Lihat cuplikan di bawah ini dan perhatikan bahwa itu vmadalah ControllerAsnilai Controller induk seperti yang digunakan dalam HTML induk

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

        scope.vm.func(...)

Setelah mencoba semuanya, saya akhirnya menemukan solusi.

Tempatkan saja yang berikut di templat Anda:

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

Itu hanya menulis atribut lingkup orangtua / variabel yang ingin Anda akses ke lingkup saat ini.

Juga perhatikan ; '' pada akhir pernyataan, itu untuk memastikan tidak ada output di template Anda. (Angular mengevaluasi setiap pernyataan, tetapi hanya menampilkan yang terakhir).

Agak gila, tapi setelah beberapa jam coba-coba, ini berhasil.