从指令调用控制器函数答案

【问题标题】：Call controller function from directive从指令调用控制器函数
【发布时间】：2016-07-07 18:55:55
【问题描述】：

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

【问题讨论】：

标签： angularjs angularjs-directive controller angularjs-scope

【解决方案1】：

如果您将显式范围属性添加到指令中，则会导致创建隔离范围。这意味着该指令将无法访问控制器外部的方法。

您可以通过将方法作为范围属性提供给将删除数据的指令来实现您的需要。

更好的方法是使用 ng-model 并包含修改指令本身内的数据的逻辑。我无法像在移动设备上一样提供代码示例，尽管您可以四处寻找示例。

此外，为了分离关注点，您可能需要考虑将 http 调用移至服务。

【讨论】：