지시문에서 컨트롤러 기능 호출

AngularJS를 처음 사용했습니다. 도서 정보를 표시 할 수있는 앱을 만들고 싶습니다. 사용자가 아이콘을 클릭하여 책 정보를 삭제할 수 있습니다. 각 도서 정보를 표시하는 고객 지시문을 사용합니다. 도서 정보 목록에 아이콘이 있으며 사용자가 아이콘을 클릭하여 도서 정보를 제거 할 수 있습니다.지시문에서 컨트롤러 기능 호출

지시문의 아이콘에 ng-click 리스너가 있지만 컨트롤러에 정의 된 함수를 호출하는 방법을 알지 못합니다.

어떻게 할 수 있습니까? 그것을 구현하는 더 좋은 방법이 있습니까?

감사

HTML 코드 :

<div class="container" ng-app="myApp" ng-controller="bookCtrl"> 
<div ng-repeat="book in books | filter :{'name' : bookName}" book-List="book"></div> 
</div>

app.js :

var app = angular.module('myApp',[]); 
app.controller('bookCtrl', function ($scope,$http){ 
    $scope.books=[]; 
    $http.get("products.json") 
    .then(function(response){ 
     $scope.books = response.data; 
    }); 

    $scope.removeItem = function(x){ 
     $scope.index = x; 
     $scope.books.splice(x,1); 
    } 
}); 

app.directive('bookList', function(){ 
    return{ 
     restrict: 'EA', 
     scope: { item : '=bookList'}, 
     templateUrl: "template.html", 
    }; 
});

템플릿 :

<div class="jumbotron" ng-app="myApp" ng-controller="bookCtrl"> 
     <div class="row" > 
      <div class="col-md-7"> 
       <h3>{{item.name}}</h3> 
      </div> 
      <div class="col-md-2"> 
       <button type="button" class="btn btn-primary">{{item.price}}</button> 
      </div> 
      <div class="col-md-2"> 
       <span class="glyphicon glyphicon-remove-sign" ng-click="removeItem($Index)"></span> 
      </div> 
     </div> 
     <div>{{item.description}}</div> 
    </div>

출처

2016-07-07 cui

당신이 당신의 지침에 명시 적 범위 속성을 추가 할 경우, 그것은 crea를 초래한다. 격리 된 범위의 즉, 지시문은 컨트롤러 외부의 메서드에 액세스 할 수 없습니다.

데이터를 제거 할 지정 문에 범위 속성으로 메소드를 제공하여 필요한 것을 얻을 수 있습니다.

더 나은 접근 방법은 ng-model을 사용하고 지시문 자체 내에서 데이터를 수정하는 논리를 포함하는 것입니다. 모바일 장치에있는 코드 예제를 제공 할 수는 없지만 예제를 살펴볼 수는 있습니다.

또한 http 호출을 서비스로 이동하여 문제를 해결할 수 있습니다.

출처

2016-07-07 19:15:14

지시문에서 컨트롤러 기능 호출

답변

관련 문제