양방향 고립 범위없이 바인딩

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이 호출 될 때 목록이 갱신되지 않습니다.

그리고 새로운 sort-Methods를 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; 
}