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

Question

我是 angular 的新手，我正在尝试在同一个控制器下连接两个独立的指令。我的项目是关于一个产品商店；第一个指令在带有按钮的列表中显示所有可用产品，第二个指令显示带有详细信息的信息。工作流程应该是这样的：当我点击产品的按钮时，详细信息应该会重新加载所选产品的内容。

我想我已经完成了所有需要的连接，但它仍然不起作用，当我点击按钮时没有任何反应......这是我的声明：

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

  });

有什么想法吗？

感谢大家:)！

编辑：问题是： - 1：参数在错误的指令中。 - 2：我写的不好，设置参数需要绑定数据：

    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>

感谢您的帮助:)。

Answer 1

有 2 个问题，

您没有将 function="expression" 传递给 production-list 指令
&表达式作用于作用域，所以函数必须在作用域中定义

'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>

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

Passing a function as parameter in an Angular Directive doesn't work

javascript

parameters

frontend

function

angularjs