Angular Directiveでパラメータとして関数を渡すことができません

Question

私は角度が新しく、同じコントローラの下に2つの独立した指令を接続しようとしています。私のプロジェクトは製品ストアに関するものです。最初の指示文はボタンでリスト内の使用可能なすべてのプロダクトを表示し、2番目のプロンプトは詳細を示す情報を表示します。ワークフローはこれでなければなりません：製品のボタンをクリックすると、選択した製品の内容で詳細情報を再ロードする必要があります。

• main.htmlを

  ：

  私の宣言がある私は、私は必要なすべてのconectionsをやったと思うが、それはまだ動作しません、私がクリックしたときにボタンを何も起こりません...ここで

  <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つの問題、

• あなたは&式がスコープ上で動作するので、関数は

スコープで定義する必要がありますproduction-listディレクティブ

にfunction="expression"を渡していませんがあります

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