指令中的呼叫控制器功能

我是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

指令中的呼叫控制器功能

回答

相关问题