AngularJS'de ana kapsama alanına kendi kapsamıyla * özel bir yönergeden * nasıl erişebilirim?

Ben bir direktif içinde "ebeveyn" kapsamına erişmek için herhangi bir yol arıyorum. Kapsam, transclude, gerektiren, değişkenleri (veya kapsamın kendisini) yukarıdan vb. Herhangi bir kombinasyonu. Örneğin, şu anda $scopepreLink parametrelerini alarak $siblingve kavramsal "üst" bulmak için kapsamları üzerinden yineleyerek yapabileceğini biliyorum .

Gerçekten istediğim, $watchana kapsamda bir ifade alabilmek . Eğer bunu yapabilir, o zaman ben burada ne yapmaya çalışıyorum başarabilirim: AngularJS - değişkenler ile kısmi hale nasıl?

Önemli bir not , direktifin aynı ana kapsam dahilinde yeniden kullanılabilir olması gerektiğidir. Bu nedenle varsayılan davranış (scope: false) benim için çalışmaz. Direktifin her örneği için ayrı bir kapsama ihtiyacım var ve daha sonra $watchüst kapsamda yaşayan bir değişkene ihtiyacım var .

Bir kod örneği 1000 kelimeye bedeldir, yani:

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

Bkz . AngularJS'de prototip / prototip kalıtım kapsamının nüansları nelerdir?

Özetlemek gerekirse: bir direktifin üst ( $parent) kapsamına erişme şekli , direktifin oluşturduğu kapsam türüne bağlıdır:

1. default ( scope: false) - yönerge yeni bir kapsam oluşturmaz, bu nedenle burada kalıtım yoktur. Direktifin kapsamı, üst / kapsayıcı ile aynı kapsamdadır. Link işlevinde, ilk parametreyi (genellikle scope) kullanın.

2. scope: true- yönerge, üst kapsamdan prototipik olarak miras kalan yeni bir alt kapsam oluşturur. Üst kapsamda tanımlanan özellikler yönerge tarafından kullanılabilir scope(prototippal devralma nedeniyle). İlkel kapsam özelliğine yazmamaya dikkat edin - bu, yönerge kapsamında yeni bir özellik oluşturacaktır (aynı adın üst kapsam özelliğini gizler / gölgeler).

3. scope: { ... }- yönerge yeni bir izolat / yalıtılmış kapsam oluşturur. Üst kapsamı prototipik olarak miras almaz. Üst kapsamı kullanarak hala erişebilirsiniz $parent, ancak bu normalde önerilmez. Bunun yerine, belirtmelidir hangi ana kapsamı özelliklerini (ve / veya fonksiyon) Ek yönergesi kullanılan aynı elemanın üzerinde nitelikler kullanarak aracılığıyla direktif ihtiyaçlar =, @ve &notasyonu.

4. transclude: true- yönerge, prototipik olarak üst kapsamdan miras alan yeni bir "aktarılan" alt kapsam oluşturur. Yönerge ayrıca bir izolat kapsamı oluşturuyorsa, transkript edilen ve izolat kapsamları kardeştir. $parentHer bir kapsam özelliği aynı üst kapsamı başvurur.
   Açısal v1.3 güncellemesi : Yönerge ayrıca bir ayrı tutma kapsamı oluşturuyorsa, aktarılan kapsam artık ayrı tutma kapsamının alt öğesidir. Aktarılan ve izolat kapsamları artık kardeş değildir. $parentÇapraz dahil kapsamının özelliği artık izolatı kapsamını başvurur.

Yukarıdaki bağlantıda 4 türün de örnekleri ve resimleri bulunmaktadır.

Direktifin derleme işlevinde kapsama erişemezsiniz (burada belirtildiği gibi: https://github.com/angular/angular.js/wiki/Understanding-Directives ). Direktifin kapsamına link fonksiyonundan erişebilirsiniz.

Seyretme:

Yukarıdaki 1. ve 2. için: normalde direktifin bir öznitelik yoluyla hangi üst özelliğe ihtiyacı olduğunu belirtir ve ardından $

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

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

Bir nesne özelliğini izliyorsanız, $ parse kullanmanız gerekir:

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

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

Yukarıdaki 3. için (kapsamı ayırın), yönerge özelliğini verdiğiniz adı @veya =simgesini kullanarak izleyin :

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

Denetleyici yöntemine erişmek, denetleyici / bağlantı / kapsam yönergesinden ana kapsamdaki bir yönteme erişmek anlamına gelir.

Yönerge üst kapsamı paylaşıyor / devralıyorsa, yalnızca bir üst kapsam yöntemini çağırmak oldukça basittir.

Yalıtılmış yönerge kapsamından üst kapsam yöntemine erişmek istediğinizde biraz daha çalışma yapmanız gerekir.

Yalıtılmış direktifler kapsamından bir ana kapsam yöntemini çağırmak veya ana kapsam değişkenlerini izlemek için ( özellikle # 6 seçeneği ) birkaç seçenek (aşağıda listelenenden daha fazla olabilir ) vardır.

Not kullandığım o link functionbu örneklerde ama bir kullanabilirsiniz directive controllergereksinimi yanı dayalı.

Seçenek 1. Nesne hazırlığı ve html şablonundan

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"
    }]

});

çalışma plnkr: http://plnkr.co/edit/rgKUsYGDo9O3tewL6xgr?p=preview

Seçenek 2. Nesne hazır bilgisi aracılığıyla ve yönerge bağlantısı / kapsamından

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

çalışma plnkr: http://plnkr.co/edit/BRvYm2SpSpBK9uxNIcTa?p=preview

Seçenek 3.. İşlev başvurusu yoluyla ve yönerge html şablonundan

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

çalışma plnkr: http://plnkr.co/edit/Jo6FcYfVXCCg3vH42BIz?p=preview

Opsiyon 4.. İşlev başvurusu ve yönerge bağlantısı / kapsamı aracılığıyla

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"
    }]

});

çalışma plnkr: http://plnkr.co/edit/BSqx2J1yCY86IJwAnQF1?p=preview

Seçenek # 5: ng modeli ve iki yönlü ciltleme yoluyla, üst kapsam değişkenlerini güncelleyebilirsiniz. . Bu nedenle, bazı durumlarda üst kapsam işlevlerini çağırmanız gerekmeyebilir.

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

çalışma plnkr: http://plnkr.co/edit/hNui3xgzdTnfcdzljihY?p=preview

Seçenek # 6: Geçiş $watchve$watchCollectionitems Yukarıdaki tüm örneklerde iki yönlü bağlayıcıdır , öğeler üst kapsamda değiştirilirse, direktifteki öğeler de değişiklikleri yansıtır.

Üst kapsamından diğer özelliklerini veya nesneleri izlemek istiyorsanız, kullandığınız bunu yapabilir $watchve $watchCollectionaşağıda verildiği gibi

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>

script app.js

var app = angular.module ('dalgıç', []);

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

Direktiflerle ilgili ayrıntılı açıklamalar için her zaman AngularJs belgelerine başvurabilirsiniz.

 scope: false
 transclude: false

ve aynı kapsama sahip olacaksınız (üst öğe ile)

$scope.$watch(...

Bu iki seçeneğe bağlı olarak ana kapsama erişmenin birçok yolu vardır.

İşte bir kez kullandığım bir hile: ana kapsamı tutmak için bir "kukla" yönergesi oluşturun ve istenen yönerge dışında bir yere yerleştirin. Gibi bir şey:

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

ve sonra

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

Belki de en zarif çözüm değil, ama işi bitirdi.

ES6 Sınıfları ve ControllerAssözdizimi kullanıyorsanız , biraz farklı bir şey yapmanız gerekir.

Aşağıdaki pasajı ve nota bakın vmolduğu ControllerAsebeveyn HTML kullanılan ana Denetleyicisi değerini

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

        scope.vm.func(...)

Her şeyi denedikten sonra sonunda bir çözüm buldum.

Şunu şablonunuza yerleştirmeniz yeterlidir:

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

Sadece geçerli kapsama erişmek istediğiniz üst kapsam niteliğini / değişkeni yazar.

Ayrıca ; '', ifadenin sonunda, şablonunuzda çıktı olmadığından emin olmak için dikkat edin. (Açısal, her ifadeyi değerlendirir, ancak yalnızca son ifadeyi verir).

Biraz acayip, ama birkaç saat süren deneme yanılma işleminden sonra işi yapar.