функция щелчка, не вызываемая из шаблона директивы

Question

Я начинающий в Angular, и я пытаюсь понять, почему в некоторых случаях мой ng-click не работает в зависимости от контекста. Во-первых, вот мой код, затем я попытаюсь более точно описать свою проблему.

HTML:

<div ng-app='myApp'> 
    <section id="map-orders" ng-controller="ProductsController as products"> 
     <div class="product-box" ng-repeat="products in products.products | orderBy:'name'"> 
     <div class="product"> 
      <h3> {{products.name}} </h3> 
      <span ng-click="remove($index)">Remove</span> 
     </div> 
     </div> 
    </section> 
</div> 

JS:

var app = angular.module('myApp', [ ]); 

app.controller('ProductsController', function(){ 
    this.products = products; 
    this.remove = function(index) { 
     products.splice(index, 1); 
    } 
}); 

var products = [ 
    { 
     name: "Carte 1", 
     generationDate: "03/03/2016", 
    }, 
    { 
     name: "Carte 2", 
     generationDate: "04/03/2016", 
    } 
]; 

Так что этот код работает. Но когда я преобразовать его, добавив директиву: HTML:

<div ng-app='myApp'> 
    <section id="map-orders" ng-controller="ProductsController as products"> 
     <div class="product-box" ng-repeat="products in products.products | orderBy:'name'"> 
     <product></product> 
     </div> 
    </section> 
</div> 

С помощью этой директивы addiotionnaly к оригинальным ЯШ:

app.directive('product', function() { 
    var tpl = '<div class="product">' + 
    '<h3 {{products.name}} </h3>' + 
    '<span ng-click="remove($index)">Remove</span>' 
    '</div>'; 
    return { 
     restrict: 'E', 
    template: tpl, 
    }; 
}); 

Мой удалить() функция не работает в настоящее время. Я не понимаю почему. Может кто-нибудь мне помочь? Если возможно, с моим кодом, так что я получаю проблему.

Спасибо авансом

Answer 1

Поскольку вы используете controllerAs синтаксиса, необходимо указать псевдоним для функции remove в шаблоне.

Живой пример на jsfiddle.

var myApp = angular.module('myApp', []); 
 

 
myApp.controller('MyCtrl', function($scope) { 
 
    this.products = [{ 
 
     name: "Alex", 
 
    }, { 
 
     name: "Sam" 
 
    }]; 
 
    this.remove = function(index) { 
 
     this.products.splice(index, 1); 
 
    } 
 
    }) 
 
    .directive("product", function() { 
 
    var tpl = '<div class="product">' + 
 
     '<h3> {{product.name}} </h3>' + 
 
     '<span ng-click="my.remove($index)">Remove</span>' 
 
    '</div>'; 
 
    return { 
 
     restrict: 'E', 
 
     template: tpl, 
 
     link: function(scope) { 
 
     console.log(scope); 
 
     } 
 
    }; 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp"> 
 
    <div ng-controller="MyCtrl as my"> 
 
    <div class="product-box" ng-repeat="product in my.products"> 
 
     <product></product> 
 
    </div> 
 
    </div> 
 
</div>

P.S. У вас ошибка в шаблоне. Вы не закрываете h3 тега

Answer 2

Здесь ваша директива просто использует один и тот же объем вашего ProductsController .so удалить метод в ProductsController может быть вызвана с помощью products.remove($index), поскольку вы следуете as controller синтаксису при задании контроллера в вашем HTML