事前定義された条件に基づいてHTMLコンポーネントをng-repeatとバインドする方法

AngularJSの新機能です。私は、アプリケーション全体で再利用されるhtmlコンポーネントを作っています。このコンポーネントが製品の基本情報を提供しているとしましょう。 HTMLの基本的な構造は以下の通りです：小さなHTMLコンポーネントは、このようなアプリで他のHTMLページで再利用されるだろう事前定義された条件に基づいてHTMLコンポーネントをng-repeatとバインドする方法

(function() { 
    'use strict'; 

    angular 
     .module('product') 
     .directive('productDetails', productDetails); 

    /** @ngInject */ 
    function productDetails() { 
     var directive = { 
      restrict: 'E', 
      templateUrl: 'app/components/productDetails/productDetails.html' 
     }; 
     return directive; 
    } 

})();

：

<div class="visible-sm-block"> 
    <div class="row"> 
     <div class="col-sm-2"> 
      <img class="img-circle img-responsive" alt="Image of product" 
       ng-src="{{}}"/> 
     </div> 
     <div class="col-sm-10"> 
      <label>{{ProductName}}</label> 
      <p>{{CompanyName}}</p> 
      <p>{{ShippedTo}}</p> 
     </div> 
    </div> 
</div>

product.jsファイルとして行きます

<product-details></product-details>

ここで問題は、ページ全体で使用されているときにHTMLコンポーネントとデータをバインドできないことです。これらのページのコントローラは別のフォルダにあります：app/productshipping/productshipping.controller.js HTMLコンポーネント自体にng-controller = "controller_name"を使用してみましたが、結果は出ませんでした。 :(助けてください。

出典

2016-04-25 Satwiki

コントローラをロードしますか？ angular.module（ 'product'、["your_controller"]）のように。 – Ozrix

この作業を意図した通りにするためには、あなたはかなり足りません。これらのディレクティブには、通常、独自の '$ scope'オブジェクトを持つ独自のコントローラがあります。また、コンポーネントの各インスタンスが独立した要素（あなたの場合は 'product'）を表示することを可能にする* isolatedスコープ*を使用します。 https://docs.angularjs.org/guide/directive – Claies

の公式ドキュメントで、隔離されたスコープを使用した公式のドキュメンテーションサンプルのサンプルがあります。https://plnkr.co/edit/MIi0qm9Vl2vfzz2mNyDM ？p = preview – Claies

をこれは本当に興味深い質問です。コードは以下のとおりである。私は、角のフレームワークを開発しています。ですから、どんなさらなる支援が必要な場合は私に知らせてください。

Product.jsファイルとして

を次のようにこれを再利用する方法

<html ng-app="app"> 
<head> 
    <title></title> 
    <link href="../Content/bootstrap.min.css" rel="stylesheet" /> 
    <script src="../Scripts/jquery-1.10.2.js"></script> 
    <script src="../Scripts/bootstrap.js"></script> 
</head> 
<body ng-controller="productController"> 
    <div class="visible-sm-block"> 
     <div class="row"> 
      <div class="col-sm-2"> 
       <img class="img-circle img-responsive" alt="Image of product" ng-src="{{}}" /> 
      </div> 
      <div class="col-sm-10"> 
       <label>{{productName}}</label> 
       <p>{{companyName}}</p> 
       <p>{{shippedTo}}</p> 
      </div> 
     </div> 
    </div> 
</body> 

</html>

を次のように

"use strict"; 

angular.module("app",[]); 

angular.module("app").controller("productController", ['$scope', function ($scope) { 


}]); 

angular.module("app").directive("tmHtml", function() { 
    return { 
     transclude: false, 
     scope: { 
      productName: '@', 
      companyName: '@', 
      shippedTo: '@' 
     }, 
     controller: "productController", 
     templateUrl: "/templates/HideShow.html" 

    }; 

});

テンプレートHTMLファイルを以下の

<html ng-app="app"> 
<head> 
    <title></title> 
    <link href="../Content/bootstrap.min.css" rel="stylesheet" /> 
    <script src="../Scripts/jquery-1.10.2.js"></script> 
    <script src="../Scripts/bootstrap.js"></script> 
    <script src="../Scripts/angular.js"></script> 
    <script src="../js/Product.js"></script> 
</head> 
<body> 
    <div> 
     <tm-Html product-Name="Sankar" company-Name="Sankar" shipped-To="Sankar"> 
     </tm-Html>  
    </div> 
</body> 

</html>

出典

2016-04-25 12:32:49

ヘビのケースとラクダのケースに注意してください。それはこれを開発する間に多くのミスをキャッチします。 –

上記の解決策があなたに役立つかどうか、私に知らせてください。ありがとうございました –

こんにちは！この回答をありがとうございます。これは動作していますが、私は一度にすべての要素をバインドする必要があります。メインページからディレクティブを介してオブジェクト全体をテンプレートHTMLに渡すことは可能ですか？ – Satwiki

事前定義された条件に基づいてHTMLコンポーネントをng-repeatとバインドする方法

答えて

関連する問題