AngularJS의 ng-click, scope 및 Nested 지시문

Question

이 중첩 된 지시문은 매우 안쪽에 'X'기호가 있습니다.이 기호는 클릭하면 항목을 삭제해야합니다 (고전적인 문제). 기본적으로 모든 것이 메뉴입니다.

'X'기호/항목에 단추를 추가했지만 컨트롤러에이 모든 것을 연결하는 방법에 대해 혼란 스럽습니다. 따라서 deleteItem() 함수를 호출 할 수 있습니다 실제로 항목을 제거하십시오. 나 또한 사이드 바 항목의 범위를 분리하고 싶다. (이 코드의 원래 버전은 좀 더 정교하고 조건문이있다.)

여기가 내가 가지고있는 것이다. 전체 작업 - 즉 실제 작동하지 않는 - 버전은 자바 스크립트

<div ng-app="demoApp"> 
    <div ng-controller="sidebarController"> 
     <div sidebar> 
      <div sidebar-item ng-repeat="item in items" item="item"></div> 
     </div> 

     <button ng-click="addItem();">Add Item</button> 
    </div> 
</div> 

그리고 여기 :이 jsfiddle

에서 찾을 수 여기에 HTML의 관련 부분

var demoApp = angular.module('demoApp', []); 

demoApp.controller("sidebarController", ["$scope", function($scope) { 
    $scope.items = [ 
    ]; 

    $scope.itemId = 1; 
    $scope.addItem = function() { 
     var inx = $scope.itemId++; 
     $scope.items.push({ id: inx, title: "Item " + inx, subTitle: "Extra content " + inx }); 
    }; 

    $scope.deleteItem = function(item) { 
     console.log("Delete this!"); 
     console.log(item); 
    }; 
}]); 

demoApp.directive("sidebar", function() { 
    return { 
     restrict: "A", 
     transclude: true, 
     template: '<div><div ng-transclude></div></div>', 
     controller: ["$scope", function($scope) { 
      this.deleteItem = function(item) { 
       $scope.deleteItem(item); 
       $scope.$apply(); 
      }; 
     }] 
    }; 
}); 

demoApp.directive("sidebarItem", function() { 
    return { 
     restrict: "A", 
     scope: { 
      item: "=" 
     }, 
     require: "^sidebar", 
     template: '<div><span>{{ item.title }}</span><br /><span>{{ item.subTitle }}</span><br /><span ng-click="deleteItem(item)">X</span></div>', 
    }; 

}); 

답변은 간단하지만 확실하지는 않습니다. 당신이 링크 기능에 주입 할 필요가 필요한 컨트롤러 기능을 사용하려면

Answer 1

sidebar-item에서

http://jsfiddle.net (나는 [jsfiddle] 수정 한

link : function (scope, element, attrs, sidebar) { 
    scope.deleteItem = function (item) { 
    sidebar.deleteItem(item); 
    } 
}