Question

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

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

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

有两个问题，

您没有将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>

java.lang.reflect.Method method;
method = TestRecommendations.class.getMethod("level1classSimilarityForUser",
                                String[].class);

在Angular Directive中传递函数作为参数不起作用

1 个答案: