Làm cách nào để truy cập phạm vi cha mẹ từ trong một chỉ thị tùy chỉnh * với phạm vi riêng * trong AngularJS?

Tôi đang tìm mọi cách truy cập phạm vi "cha mẹ" trong một chỉ thị. Bất kỳ sự kết hợp nào của phạm vi, bao gồm, yêu cầu, chuyển các biến (hoặc chính phạm vi) từ phía trên, v.v. Ví dụ, tôi biết tôi có thể làm điều đó ngay bây giờ bằng cách lấy $scopetừ các tham số preLink và lặp lại $siblingphạm vi của nó để tìm "cha mẹ" khái niệm.

Điều tôi thực sự muốn là có thể $watchbiểu thức trong phạm vi cha. Nếu tôi có thể làm điều đó, thì tôi có thể thực hiện những gì tôi đang cố gắng thực hiện ở đây: AngularJS - Làm thế nào để kết xuất một phần với các biến?

Một lưu ý quan trọng là lệnh phải được sử dụng lại trong cùng phạm vi cha. Do đó, hành vi mặc định (phạm vi: sai) không hoạt động đối với tôi. Tôi cần một phạm vi riêng cho mỗi phiên bản của lệnh, và sau đó tôi cần $watchmột biến sống trong phạm vi cha.

Một mẫu mã có giá trị 1000 từ, vì vậy:

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

Xem các sắc thái của thừa kế nguyên mẫu / nguyên mẫu trong AngularJS là gì?

Tóm lại: cách một lệnh truy cập $parentphạm vi cha ( ) của nó phụ thuộc vào loại phạm vi mà lệnh này tạo ra:

1. default ( scope: false) - lệnh không tạo phạm vi mới, do đó không có sự kế thừa ở đây. Phạm vi của lệnh là cùng phạm vi với cha / container. Trong chức năng liên kết, sử dụng tham số đầu tiên (thông thường scope).

2. scope: true- chỉ thị tạo ra một phạm vi con mới kế thừa nguyên mẫu từ phạm vi cha. Các thuộc tính được xác định trên phạm vi cha có sẵn cho lệnh scope(vì kế thừa nguyên mẫu). Chỉ cần cẩn thận khi viết vào một thuộc tính phạm vi nguyên thủy - điều đó sẽ tạo ra một thuộc tính mới trên phạm vi chỉ thị (ẩn / làm mờ thuộc tính phạm vi cha mẹ cùng tên).

3. scope: { ... }- chỉ thị tạo ra một phạm vi cô lập / cô lập mới. Nó không nguyên mẫu kế thừa phạm vi cha. Bạn vẫn có thể truy cập phạm vi cha mẹ bằng cách sử dụng $parent, nhưng điều này thường không được khuyến nghị. Thay vào đó, bạn nên xác định mà cha mẹ thuộc tính phạm vi (và / hoặc chức năng) ứng nhu cầu thị qua thuộc tính bổ sung trên cùng một nguyên tố mà chỉ được sử dụng, sử dụng =, @và &ký hiệu.

4. transclude: true- lệnh này tạo ra một phạm vi con "xuyên" mới, được kế thừa nguyên mẫu từ phạm vi cha. Nếu chỉ thị cũng tạo ra một phạm vi cô lập, phạm vi xuyên và phạm vi cô lập là anh em ruột. Các $parentthuộc tính của mỗi phạm vi tham chiếu cùng một phạm vi cha.
   Cập nhật Angular v1.3 : Nếu chỉ thị cũng tạo ra một phạm vi cô lập, thì phạm vi được bao phủ bây giờ là con của phạm vi cô lập. Các phạm vi xuyên và cô lập không còn là anh em ruột thịt. Các $parenttài sản của phạm vi nhúng tại tham chiếu phạm vi cô lập.

Liên kết trên có ví dụ và hình ảnh của cả 4 loại.

Bạn không thể truy cập phạm vi trong chức năng biên dịch của lệnh (như được đề cập ở đây: https://github.com/angular/angular.js/wiki/Under Hiểu-Directives ). Bạn có thể truy cập phạm vi của lệnh trong chức năng liên kết.

Xem:

Đối với 1. và 2. ở trên: thông thường bạn chỉ định thuộc tính gốc nào mà chỉ thị cần thông qua một thuộc tính, sau đó $ xem nó:

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

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

Nếu bạn đang xem một thuộc tính đối tượng, bạn sẽ cần sử dụng $ parse:

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

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

Đối 3. trở lên (phạm vi cô lập), xem tên mà bạn cung cấp cho các tài sản chỉ thị bằng cách sử dụng @hoặc =ký hiệu:

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

Truy cập phương thức điều khiển nghĩa là truy cập một phương thức trên phạm vi cha từ bộ điều khiển / liên kết / phạm vi chỉ thị.

Nếu chỉ thị đang chia sẻ / kế thừa phạm vi cha thì việc chuyển một phương thức phạm vi cha mẹ là khá đơn giản.

Cần thêm ít công việc khi bạn muốn truy cập phương thức phạm vi cha từ phạm vi chỉ thị bị cô lập.

Có một vài tùy chọn (có thể nhiều hơn được liệt kê bên dưới) để gọi một phương thức phạm vi cha từ phạm vi chỉ thị bị cô lập hoặc xem các biến phạm vi cha ( đặc biệt là tùy chọn # 6 ).

Lưu ý rằng tôi đã sử dụng link functiontrong các ví dụ này nhưng bạn cũng có thể sử dụng directive controllertheo yêu cầu.

Lựa chọn 1. Thông qua Object bằng chữ và từ mẫu html chỉ thị

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

});

làm việc plnkr: http://plnkr.co/edit/rgKUsYGDo9O3tewL6xgr?p=preview

Lựa chọn 2. Thông qua đối tượng bằng chữ và từ liên kết / phạm vi chỉ thị

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

làm việc plnkr: http://plnkr.co/edit/BRvYm2SpSpBK9uxNIcTa?p=preview

Lựa chọn số 3. Thông qua chức năng tham khảo và từ mẫu html chỉ thị

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

làm việc plnkr: http://plnkr.co/edit/Jo6FcYfVXCCg3vH42BIz?p=preview

Lựa chọn số 4. Thông qua chức năng tham khảo và từ liên kết / phạm vi chỉ thị

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

});

làm việc plnkr: http://plnkr.co/edit/BSqx2J1yCY86IJwAnQF1?p=preview

Tùy chọn # 5: Thông qua mô hình ng và ràng buộc hai chiều, bạn có thể cập nhật các biến phạm vi cha. . Vì vậy, bạn có thể không yêu cầu gọi hàm phạm vi cha trong một số trường hợp.

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

làm việc plnkr: http://plnkr.co/edit/hNui3xgzdTnfcdzljihY?p=preview

Tùy chọn # 6: Thông qua $watchvà$watchCollection Đó là hai cách ràng buộc choitems trong tất cả các ví dụ trên, nếu các mục được sửa đổi trong phạm vi cha, các mục trong chỉ thị cũng sẽ phản ánh các thay đổi.

Nếu bạn muốn xem các thuộc tính hoặc đối tượng khác từ phạm vi cha, bạn có thể làm điều đó bằng cách sử dụng $watchvà $watchCollectionnhư được đưa ra dưới đây

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>

tập lệnh 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"
  }]
});

Bạn luôn có thể tham khảo tài liệu của AngularJs để được giải thích chi tiết về các chỉ thị.

 scope: false
 transclude: false

và bạn sẽ có cùng phạm vi (với phần tử cha)

$scope.$watch(...

Có rất nhiều cách để truy cập phạm vi cha mẹ tùy thuộc vào hai phạm vi tùy chọn & phạm vi này.

Đây là một mẹo tôi đã sử dụng một lần: tạo một lệnh "giả" để giữ phạm vi cha và đặt nó ở đâu đó bên ngoài chỉ thị mong muốn. Cái gì đó như:

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

và sau đó

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

Có thể không phải là giải pháp duyên dáng nhất, nhưng nó đã hoàn thành công việc.

Nếu bạn đang sử dụng ES6 Classes và ControllerAscú pháp , bạn cần làm một cái gì đó hơi khác.

Xem đoạn trích bên dưới và lưu ý rằng đó vmlà ControllerAsgiá trị của Trình điều khiển chính được sử dụng trong HTML cha

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

        scope.vm.func(...)

Đã thử mọi cách, cuối cùng tôi đã đưa ra một giải pháp.

Chỉ cần đặt sau đây trong mẫu của bạn:

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

Nó chỉ ghi thuộc tính phạm vi cha / biến bạn muốn truy cập vào phạm vi hiện tại.

Cũng lưu ý ; ''ở phần cuối của câu lệnh, để đảm bảo không có đầu ra nào trong mẫu của bạn. (Angular đánh giá mọi tuyên bố, nhưng chỉ đưa ra câu lệnh cuối cùng).

Đó là một chút hack, nhưng sau một vài giờ thử nghiệm và lỗi, nó thực hiện công việc.