Call-Controller-Funktion von Direktive

Question

Ich bin neu in AngularJS. Ich möchte eine App erstellen, die Buchinformationen anzeigen kann, und Benutzer könnte auf ein Symbol klicken, um die Buchinformationen zu entfernen. Ich benutze eine Kundenanweisung, die jede Buchinformation anzeigt. Es gibt ein Symbol in der Liste der Buchinformationen und der Benutzer könnte auf das Symbol klicken, um die Buchinformationen zu entfernen.

Ich habe eine NG-Klick-Listener auf das Symbol in der Direktive, aber ich weiß nicht, wie man die Funktion definieren im Controller aufrufen.

Können Sie mir sagen, wie es geht? Gibt es einen besseren Weg, es zu implementieren?

Dank

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", 
    }; 
}); 

Vorlage:

<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

Wenn Sie eine explizite Anwendungsbereich Eigenschaft zu Ihrer Richtlinie hinzuzufügen, es resultiert in der Kreation eines isolierten Bereichs. Dies bedeutet, dass die Richtlinie nicht auf Methoden außerhalb des Controllers zugreifen kann.

Sie können möglicherweise erreichen, was Sie benötigen, indem Sie die Methode als Bereichsattribut für die Anweisung bereitstellen, die die Daten entfernt.

Ein besserer Ansatz wäre es, ng-Modell zu verwenden und die Logik zu enthalten, die die Daten innerhalb der Direktive selbst modifiziert. Ich kann keine Code-Beispiele bereitstellen, da ich mich auf einem mobilen Gerät befinde, obwohl Sie sich nach Beispielen umsehen können.

Darüber hinaus möchten Sie möglicherweise Ihre HTTP-Aufruf an einen Dienst verschieben, um Bedenken zu trennen.