指令中的呼叫控制器功能

我是AngularJS的新手。我想構建一個可以顯示書籍信息的應用程序，用戶可以點擊一個圖標來刪除書籍信息。我使用顯示每本圖書信息的客戶指令。圖書信息列表上有一個圖標，用戶可以點擊圖標刪除圖書信息。指令中的呼叫控制器功能

我在指令中的圖標上有一個ng單擊偵聽器，但我不知道如何讓它調用控制器中的函數define。

你能告訴我該怎麼做嗎？有沒有更好的方法來實現它？

感謝

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

如果一個明確的範圍屬性添加到您的指令，它會導致創造力一個孤立的範圍。這意味着指令將無法訪問控制器外部的方法。

您可以通過將方法作爲範圍屬性提供給將移除數據的指令來實現您所需的功能。

更好的方法是使用ng-model幷包含修改指令本身內的數據的邏輯。我無法提供代碼示例，因爲我在移動設備上，儘管您可以查看示例。

此外，爲了分離問題，您可能需要考慮將您的http調用移動到服務。

來源

2016-07-07 19:15:14

指令中的呼叫控制器功能

回答

相關問題