0

私はangularjsを初めて使用するので、何か不足している可能性がありますが、親ビューで(より良い言葉がないため)インスタンス化できる再利用可能なビューを作成する良い方法が見つかりません。

私のユースケースは、同じコントロールとビュー テンプレートに基づいて同様のコンテンツを表示する同じページに多数のサブパネルがあるメイン ビュー ページがある Web アプリですが、構成オプションが異なるだけです。(例: stackoverflow の質問の要約を含む小さなパネルですが、各パネルは異なる質問 ID の詳細を取得するように構成されています)

ここで JSFiddle が動作しています: http://jsfiddle.net/abierbaum/Agbdz/

私が探しているのは、次の 2 つの点に関するフィードバックです。

  • サブパネルコントローラーに初期化パラメーターを渡すにはどうすればよいですか?
  • これを行うためのより良い方法があれば。

ここにコードのコアがあります

<!DOCTYPE html>
<div ng-app="app">
 <div ng-init="names=['Jim','Spock','Jean Luc', 'Data', 'Riker']">
     <h1>Non-looping instances</h1>
     <br/><h1>First One</h1>
     <div ng-include="'panel.tpl.html'" 
          ng-init="name = 'Bob'"
     ></div>     

     <br/><h1>Second One</h1>
     <!-- Is this the best/only way to pass parameter to sub-panel? -->
     <div ng-include="'panel.tpl.html'" 
          ng-init="name = 'Pete'"
          ></div>     

     <h1>Looping Forms</h1>
     <!-- This is going to create a bunch of extra scopes: repeat & include -->
     <div ng-repeat="name in names">
         <div ng-include="'panel.tpl.html'"/>
     </div>     
 </div>

 <script type="text/ng-template" id="panel.tpl.html">
   <div class="panel" ng-controller='PanelCtrl as ctrl'>
       <br/>
     <input type='text' ng-model='ctrl.name' />
     <p>Current: {{ctrl.name}}</p>
       <button ng-click="ctrl.sayHi()">speak</button>
   </div>
 </script>

</div>

コントローラーファイルは次のようになります。

angular.module('app', [])
.controller('PanelCtrl', function($scope) {
   this.name = $scope.name || 'Jack';

    this.sayHi = function() {
        console.log('Hi, I am ' + this.name);
    }
});
4

3 に答える 3

1

私はAngularアプリに約2か月取り組んでいるので、決してAngularの専門家ではありませんが、Googleで何晩も検索した後、おおよその方法は次のとおりです. 重要なことであり、angular で最も優れていることの 1 つはスコープであり、テンプレートと親ページが誤って互いに踏みにじらないようにスコープを分離する機能です。

親コントローラー:

var myModule = angular.module('app', [])
.controller('PanelCtrl', function($scope) {
   $scope.dataPassDown = {
       dataItem: 'some variable',
       dataPackage: {name: 'name', age: '20'},
       someFunction: function(){ console.log('hello world');}
   }
});

ディレクティブを作成します。

myModule.directive('reusableTemplate', function factory(){
    return {
        scope: {directiveData: '='}, // creates isolate scope and two way data binding
        link: function(scope, element, attrs){
            //your link function here
            if (directiveData.dataItem == 'some variable'){
                //do something based on variable passed in by parent.
            }
        },
        templateUrl: 'yourReuseableTemplateUrl.html'
    }
}

Angluar ページ / html で、次のディレクティブを呼び出します。 

       <div ng-reusable-template="" ディレクティブ データ="dataPassDown"></div>

ディレクティブに関する素晴らしい 1 時間のYouTube ビデオがあり、非常に推奨されており、時間をかける価値があり、派手なトランスクルージョンについても説明しています。これにより、角度ディレクティブのドキュメントが理にかなっています。

于 2013-09-02T21:59:27.213 に答える
0

そのテンプレートでディレクティブを作成し、属性を設定のフィールドとして使用します。

于 2013-09-01T20:17:48.460 に答える