指令からコールコントローラ機能

Question

私は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> 

Answer 1

あなたのディレクティブに明示的なスコープのプロパティを追加する場合は、それはcreaをもたらす隔離された範囲のこれは、ディレクティブがコントローラ外のメソッドにアクセスすることができないことを意味します。

データを削除するディレクティブにメソッドをスコープ属性として提供することで、必要なものを実現できます。

より良いアプローチは、ng-modelを使用し、ディレクティブ自体内のデータを変更するロジックを含むことです。モバイルデバイスのようにコード例を提供することはできませんが、例を見てみることができます。

また、懸念を分離するために、httpコールをサービスに移動することを検討することをおすすめします。