44

同じ HTML テンプレートを 3 つの場所で、毎回異なるモデルで使用したいと考えています。テンプレートから変数にアクセスできることはわかっていますが、名前が異なります。

モデルを ngInclude に渡す方法はありますか?

これは私が達成したいことです。もちろん、属性 add-variable は現在機能しません。次に、含まれているテンプレートで、detailsObject とそのプロパティにアクセスします。

<pane title="{{projectSummary.ProjectResults.DisplayName}}">
    <h2>{{projectSummary.ProjectResults.DisplayName}}</h2>
    <ng-include src="'Partials/SummaryDetails.html'" init-variable="{'detailsObject': projectSummary.ProjectResults}"></ng-include>
</pane>

<pane  title="Documents" header="true"></pane>

<pane ng-repeat="document in projectSummary.DocumentResults" title="{{document.DisplayName}}">
    <h2>{{document.DisplayName}}</h2>
    <ng-include src="'Partials/SummaryDetails.html'" add-variable="{'detailsObject': document}"></ng-include>
</pane>

<pane ng-repeat="header in [1]" title="Languages" header="true"></pane>

<pane ng-repeat="language in projectSummary.ResultsByLanguagePairs" title="{{language.DisplayName}}">
    <h2>{{document.DisplayName}}</h2>
    <ng-include src="'Partials/SummaryDetails.html'" add-variable="{'detailsObject': language}"></ng-include>
</pane>

ng-include を使用して悪いアプローチをとった場合、他に試してみるべきことがありますか?

4

6 に答える 6

21

注：これは私の最初の答えではありませんが、角度を少し使用した後にこれを行う方法です。

このフィドルに見られるように、動的データをディレクティブに渡すマークアップとしてhtmlテンプレートを使用してディレクティブを作成します。

この例の手順/メモ:

  1. データをディレクティブに渡すために使用される および 属性のマークアップを使用して、ディレクティブを定義しtemplateUrlます (typeこの例では名前が付けられています)。
  2. テンプレートのディレクティブ データを使用します (typeこの例では名前が付けられています)。
  3. マークアップでディレクティブを使用する場合は、コントローラー スコープからディレクティブにデータを渡すようにしてください<address-form type="billing"></address-form>(請求がコントローラー スコープのオブジェクトにアクセスしている場合)。
  4. ディレクティブを定義する場合、名前はキャメルケースですが、マークアップで使用する場合は小文字のダッシュで区切られることに注意してください (つまりaddressForm、js では名前が付けられていますがaddress-form、html では名前が付けられています)。詳細については、こちらの角度ドキュメントを参照してください。

ここにjsがあります：

var myApp = angular.module('myApp',[]);

angular.module('myApp').directive('addressForm', function() {
    return {
        restrict: 'E',
        templateUrl: 'partials/addressform.html', // markup for template
        scope: {
            type: '=' // allows data to be passed into directive from controller scope
        }
    };
});

angular.module('myApp').controller('MyCtrl', function($scope) {
    // sample objects in the controller scope that gets passed to the directive
    $scope.billing = { type: 'billing type', value: 'abc' };
    $scope.delivery = { type: 'delivery type', value: 'def' };
});

マークアップあり:

<div ng-controller="MyCtrl">
    <address-form type="billing"></address-form>
    <address-form type="delivery"></address-form>
</div>

ORIGINAL ANSWER (ディレクティブ BTW を使用するのとは完全に異なります)。

注：以下の元の回答のフィドルは、エラーのために機能していないようです（ただし、それでも役立つ場合に備えてここに保管してください）

これについては Google グループで議論がありました。ここで見ることができます。

この機能はそのままではサポートされていないようですが、この投稿で説明されているように Brice のパッチを使用できます。

彼のjsfiddleのサンプル コードは次のとおりです。

<script id="partials/addressform.html" type="text/ng-template">
    partial of type {{type}}<br>
</script>

<div ng-controller="MyCtrl">
  <ng-include src="'partials/addressform.html'" onInclude="type='billing'"></ng-include>
  <ng-include src="'partials/addressform.html'" onLoad="type='delivery'"></ng-include>
</div>
于 2012-11-16T19:31:54.493 に答える
14

これを修正するプルがありますが、死んでいるように見えます: https://github.com/angular/angular.js/pull/1227

Angular のソース コードを変更しなくても、再利用可能でハックしすぎない方法で問題を解決できます。

directive('newScope', function() {
    return {
        scope: true,
        priority: 450,
    };
});

そして例：

<div new-scope ng-init="myVar = 'one instance'" ng-include="'template.html'"></div>
<div new-scope ng-init="myVar = 'another instance'" ng-include="'template.html'"></div>

これが実際のプランカーです: http://plnkr.co/edit/El8bIm8ta97MNRglfl3n

于 2014-01-23T17:58:46.243 に答える
6 
<div new-scope="myVar = 'one instance'" ng-include="'template.html'"></div>

directive('newScope', function () {
    return {
        scope: true,
        priority: 450,
        compile: function () {
            return {
                pre: function (scope, element, attrs) {
                    scope.$eval(attrs.newScope);
                }
            };
        }
    };
});

これは、John Culviner の回答と Angular の のコードを組み合わせnew-scopeたディレクティブですng-init。

完全を期すために、これはAngular 1.2 26 ng-init sourceです。 new-scope ディレクティブの唯一の変更は、scope: true

{
  priority: 450,
  compile: function() {
    return {
      pre: function(scope, element, attrs) {
        scope.$eval(attrs.ngInit);
      }
    };
  }
}
于 2014-10-09T17:07:59.373 に答える
5

手っ取り早いソリューション:

<div ng-init="details=document||language||projectSummary.ProjectResults">
于 2012-11-16T19:40:16.463 に答える
1

私はあなたを聞く！ng-include は、グローバル スコープにアクセスできるため、それほど再利用可能ではありません。少し変です。

ローカル変数を設定する方法が必要です。ng-include の代わりに新しいディレクティブを使用すると、よりクリーンなソリューションになります。

理想的な使用法は次のようになります。

<div ng-include-template="'Partials/SummaryDetails.html'" ng-include-variables="{ 'detailsObject': language }"></div>

ディレクティブは次のとおりです。

.directive(
  'ngIncludeTemplate'
  () ->
    {
      templateUrl: (elem, attrs) -> attrs.ngIncludeTemplate
      restrict: 'A'
      scope: {
        'ngIncludeVariables': '&'
      }
      link: (scope, elem, attrs) ->
        vars = scope.ngIncludeVariables()
        for key, value of vars
          scope[key] = value
    }
)

ディレクティブがグローバル スコープを使用していないことがわかります。代わりに、ng-include-variables からオブジェクトを読み取り、それらのメンバーを独自のローカル スコープに追加します。

それはきれいで一般的です。

于 2015-10-25T18:10:07.903 に答える