在 Angular 指令中将函数作为参数传递不起作用

Question

I'm new in angular and I'm trying to connect two isolated directives under the same controller. My project is about a product store; the first directive shows all available products in a list with a button, the second shows the information with details. Workflow should be this: when I click on the button of a product the detail information should be reloaded with the content of the choosen product.

I think I've done all the conections needed, but it still doesn't work, when I click the button nothing happens... Here are my declarations:

• Main.html

  <div ng-controller="ProductController as productCtrl"> <product-list data=productCtrl.productList></product-list> <product-details title={{productCtrl.activeProduct.title}} img={{productCtrl.activeProduct.imgSrc}} activator="productCtrl.setActiveProduct(p)"></product-details> <div>

• ProductList.js

   'use strict' angular.module('angularTestAppApp') .directive("productList", function(){ return { restrict: 'E', scope:{ data: "=", function: "&activator" }, templateUrl: 'views/ProductList.html' } });

• ProductList.html

   <table class="table"> <thead> <tr> <th></th> <th>Name</th> <th>Price</th> <th></th> </tr> </thead> <tbody> <tr ng-repeat="product in data"> <th scope="row"> <button class="btn btn-info glyphicon glyphicon-play" ng-click='function(product)'></button> </th> <td>{{product.title}}</td> <td>{{product.price | currency}}</td> <td> <img ng-src={{product.imgSrc}} width=15%></img> </td> </tr> </tbody> </table>

• ProductController.js

   'use stricts' angular.module('angularTestAppApp') .controller('ProductController', function(productListService) { ... this.activeProduct = { "title": "Hymn for the Weekend", "imgSrc": "images/hymn.jpg", "price": "2" }; this.setActiveProduct = function(p) { this.activeProduct = p; console.log('Active product ' + this.activeProduct); } });

Any idea?

Thanks for all :)!

EDIT: The problems were: - 1: The argument was in the wrong directive. - 2: I was writing bad the function, to set parameters you need to bind the data by this way:

    ng-click='function({product:product})'

Instead of 

    ng-click='function(product)'

Calling in the HTML directive by this way:

    <product-list data=productCtrl.productList activator="productCtrl.setActiveProduct(product)"></product-list>

Thanks for your help :).

Answer 1

There are 2 issues,

• You are not passing function="expression" to the production-list directive
• The & expression works on the scope, so the function must be defined in the scope

 'use strict'; angular.module('angularTestAppApp', []) angular.module('angularTestAppApp') .directive("productList", function() { return { restrict: 'E', scope: { data: "=", function: "&activator" }, template: '<table class="table"><thead><tr><th></th><th>Name</th><th>Price</th><th></th></tr></thead><tbody><tr ng-repeat="product in data"><th scope="row"><button class="btn btn-info glyphicon glyphicon-play" ng-click="function({product:product})"></button></th><td>{{product.title}}</td><td>{{product.price | currency}}</td><td><img ng-src={{product.imgSrc}} width=15%></img></td></tr></tbody></table>' } }); angular.module('angularTestAppApp') .controller('ProductController', function($scope) { this.productList = [{ title: 1, price: 1 }, { title: 2, price: 2 }]; this.activeProduct = { "title": "Hymn for the Weekend", "imgSrc": "images/hymn.jpg", "price": "2" }; var ctrl = this; $scope.setActiveProduct = function(p) { ctrl.activeProduct = p; console.log('Active product ' + ctrl.activeProduct, ctrl); } });

 <link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="angularTestAppApp"> <div ng-controller="ProductController as productCtrl"> <product-list data="productCtrl.productList" activator="setActiveProduct(product)"></product-list> <pre>{{productCtrl.activeProduct}}</pre> <product-details title={{productCtrl.activeProduct.title}} img={{productCtrl.activeProduct.imgSrc}} activator="productCtrl.setActiveProduct(p)"></product-details> </div> </div>