Два пути привязки без изолированного объема

Question

У меня есть директива, которая получает объект:

export class MyListDirective implements ng.IDirective { 
    bindToController = true; 
    controller = MyListDirectiveController; 
    controllerAs = "vm"; 
    require = ["^parentDirective"]; 
    restrict = "E"; 
    templateUrl = '/list.tpl.html'; 
    scope = { 
     detailedObject: "=" 
    }; 
} 

MyListDirectiveController:

export class MyListDirectiveController implements IMyListScope{ 
     colliRelatedDetails: ColliEventGroup[]; 

     static $inject = ['$scope']; 

     constructor(scope:any) { 

     } 
    } 

и шаблон (list.tpl.html):

<div class="table-responsive"> 
    <table id="listtable" 
      class="table valigntoptable collapse-table table-striped table-hover"> 
     <thead> 
     <tr> 
      <th> 
       <div class="cursor-pointer" ng-click="vm.sortEventsByNumber()">Number</div> 
      </th> 

      <th> 
       <div class="cursor-pointer" ng-click="vm.$parent.sortEventsByValue()">Value</div> 
      </th> 
     </tr> 
     </thead> 

     <tbody ng-repeat="Event in vm.detailedObjects"> 
     <tr class="top-padding"> 
      <td> 
       {{Event.number}} 
      </td> 

      <td> 
       {{Event.value}} 
      </td> 
     </tr> 
     </tbody> 
    </table> 
</div> 

Как вы можете видеть, у меня нет метода сортировки в MyDirectiveController. Методы, которые я пытаюсь решить, находятся в контроллере родителей (так как мне нужен другой подобный список). Поэтому мне нужно вызвать методы parentDirectiveController. Но как мне получить к ним доступ?

Я не могу избавиться от изолированного объема, потому что мне нужна двусторонняя привязка. В противном случае список не будет обновляться, когда вызываются функции sort-functions.

И добавить новые методы сортировки внутри MyListDirectiveController, ввести родительский знак и затем вызвать методы. Но похоже, что это не было бы чистым способом сделать это.

Answer 1

Попробуйте это:

<div ng-app="myApp" ng-controller="myCtrl"> 
    Name: <input ng-model="firstname"> 
    <h1>{{firstname}}</h1> 
</div> 

<script> 
var app = angular.module('myApp', []); 
app.controller('myCtrl', function($scope) { 
    $scope.firstname = "John"; 
    $scope.lastname = "Doe"; 
}); 
</script> 

<p>Change the name inside the input field, and the model data will change automatically, and therefore also the header will change its value.</p> 

</body> 
</html> 

Answer 2

Есть два способа сделать это. Первым было бы явно передать функции от родителя к дочернему в качестве параметров. Это намного более гибко, но требует, чтобы функции указывались в разметке, что может быть нежелательно. IE:

export class MyListDirective implements ng.IDirective { 
    ... 
    scope = { 
     detailedObject: "=", 
     sortEventsByNumber: "&" 
    }; 
} 

<my-list-directive detailedObject="vm.object" sortEventsByNumber="vm.numberSorter"></my-list-directive> 

Другой вариант заключается в использовании require в вашей директиве. Это заставляет родительские/дочерние отношения, что означает, что эта директива не может функционировать, если она помещена внутри другого элемента.

Вы уже добавили это в директиву, но не подключены к нему. Чтобы получить доступ к требуемому родительскому контроллеру, вам необходимо получить к нему доступ через функцию ссылки.

export class MyListDirective implements ng.IDirective { 
    ... 
    require = "^parentDirective", 
    link: function(scope, elem, attrs, parentInstance) { 
     //the fourth argument is the controller instance you require 
     vm.sortEventsByNumber = parentInstance.sortEventsByNumber; 
}