Question

我是AngularJS的新手。我想构建一个可以显示书籍信息的应用程序，用户可以点击图标来删除书籍信息。我使用显示每本书信息的客户指令。书籍信息列表上有一个图标，用户可以单击该图标以删除书籍信息。

我在指令中的图标上有一个ng-click监听器，但我不知道如何让它调用控制器中的函数define。

你能告诉我怎么做吗？有没有更好的方法来实现它？

由于

HTML code：

<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

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

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

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

此外，您可能需要考虑将http调用移至服务，以便分离问题。

从指令调用控制器函数

1 个答案: