angularjs - AngularJS ビューの埋め込み

Question

私は基本的にかなり典型的だと思う AngularJS アプリケーションを持っています (多くの例と同様)。

<html ng-app="myApp" ...
<body>
...
    <div class="main" ng-view></div>
    ...

次のように、ユーザーをビュー (コントローラーを使用したテンプレート部分) に誘導するために、$routeProviderたくさんの s を使用してセットアップしたものがあります。when

$routeProvider.when('/incident/:identifier', {templateUrl:'incident.html', controller:"IncidentCtrl"});

これはすべて正常に機能しています。ユーザーはビュー間を行き来できます。

ここで、「インシデント」のビューがあるとしましょう。「インシデント」のプロパティを持つフォームを持っています。(フォームの値を変更して「保存」することができますが、これはここでのポイント以外にあります。) 次の要件があります。

既存のフォームの下にある「作業指示書を追加」ボタン
ボタンをクリックすると、フォーム (部分) が既存のフォームの下に読み込まれ、新しい「作業指示書」の詳細を入力します。
読み込まれたフォーム (部分) の一部としての「保存」ボタンは、新しい「作業指示書」を保存します。
フォーム (部分) が閉じているか、アンロードされているか、少なくとも視覚的に削除されている
おそらく2.に戻って繰り返す（後続の「作業指示」を追加する）

既存のフォームの下に読み込まれるフォームについては、既存のテンプレートパーシャルを後続のコントローラーで再利用したいと考えていng-viewます。しかし、これを実装するためにいくつかの道をたどりましたが、無駄でした。ng-includeそれはかなり静的であり、埋め込まれた要素のライフサイクルの多くを許可しないため、機能しないようです。また、動的にロードするのは難しいようです。つまり、「作業指示書を追加」ボタンがクリックされる前にロードされます。誰かが私に実行可能な戦略を教えてもらえますか? 明らかに私の目標は、ユーザーが常にビュー間を移動することなく、既存のテンプレートのパーシャルとコントローラーの再利用を促進することです。とても有難い。

ng-include編集：精緻化：これまでに見たアイデアには（まだ）満足していません。

埋め込むビューが 1 種類以上あるとしたら、それらはたくさんあるでしょう。それらはすべて、正当な理由もなく、表示される前にロードされます。行き過ぎ
$routeParamsから渡すことができるのと同じ方法で埋め込みビューをパラメーター化する方法がわかりません$routeProvider
親と子のスコープ間であまりにも多くの共有が不快です
後続の「追加」のためにコントローラーをきれいに再作成する方法がありません

score 5 · Accepted Answer

私はあなたの懸念に対処しようとしますng-include

埋め込むビューが 1 種類以上あるとしたら、それらはたくさんあるでしょう。それらはすべて、正当な理由もなく、表示される前にロードされます。行き過ぎ

ng-ifここであなたを助けることができます。このディレクティブは、条件が true になるまで DOM をロードしません。また、条件が false になると DOM を破棄します。だから何か

    <div ng-if='conditionwhenthepartialshouldbeshown'>
      <ng-include src='templateName'  ng-init='model=parent.someProperty'/>
    </div>

$routeProvider から $routeParams を渡すことができるのと同じ方法で、埋め込みビューをパラメーター化する方法がわかりません

ng-initビューが読み込まれるときにいくつかのパラメーターを渡すために使用できます。ドキュメントを確認する

親と子のスコープ間であまりにも多くの共有が不快です

ng-initここでまた助けることができます。子スコープでプロパティを作成し、それに親スコープの値を渡すことができますng-init

後続の「追加」のためにコントローラーをきれいに再作成する方法がありません

ng-ifがこれを行います。

score 2 · Accepted Answer

この動作を再現するために私が見つけた方法は、2 つのコントローラーを使用することでした。1 つは「メイン」ビュー用で、もう 1 つは部分ビュー用です。

コントローラーファイルで

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

controllers.controller('IncidentCtrl', ['$scope', function($scope) {
    // Incident Ctrl Body
    $scope.showForm = false;
    $scope.toggleForm = function() {
        $scope.showForm = !$scope.showForm;
    }
}]);

controllers.controller('WorkOrderCtrl', ['$scope', function($scope) {
    // Partial Form controller
    // This controller can talk with $scope from IncidentCtrl 
    //    using the $scope.$parent.$parent

    $scope.save = function() {
        // ...
        $scope.$parent.$parent.showForm = false;
    }
}]);

そしてあなたの意見：

<!-- incident.html -->
<button data-ng-click="toogleForm()"> Toggle Form </button>
<div data-ng-show="showForm">
    <div ng-include src="'path/to/_work_order.html'"></div>
</div>

<!-- _work_order.html -->
<div data-ng-controller="WorkOrderCtrl">
   <!-- view body -->
   <button data-ng-click="save()"> Save </button>
</div>

angularjs - AngularJS ビューの埋め込み

2 に答える 2

Related

Reference