10

私は次の設定をしています：

アプリ/指令

var app = angular.module("MyApp", []);

app.directive("adminRosterItem", function () {
    return {
        restrict: "E",
        scope: {
            displayText: "@"
        },
        template: "<td>{{ displayText }}</td>", // should I have this?
        link: function(scope, element, attrs){
            // What do I put here? I don't seem to have any
            // element to initialize (set up event handlers, for example)
        },
        compile: function(?,?,?){} // should I have this? If so, what goes inside?
    }
});

コントローラ

function PositionsController($scope) {
           $scope.positions = [{ Name: "Quarterback", Code: "QB" },
                               { Name: "Wide Receiver", Code: "WR" }
                              ]; 
}

HTML:

<div ng-app="MyApp">
    <div ng-controller="PositionsController">            
        <table>
            <tr ng-repeat="position in positions">
                <admin-roster-item displayText="{{ position.Name + ' (' + position.Code + ')' }}"></admin-roster-item>
             </tr>
         </table>       
    </div>
</div>

これは非常に単純な例ですが、レンダリングできません。おそらく、チュートリアルでは教えてくれないことがあるでしょうか、それとも Angular の秘密の知識でしょうか?

<tr ng-repeat="..." />代わりにand内のディレクティブを削除すると<td>{{ displayText }}</td>、すべてのレコードが表示されます。

<td>{{}}</td>しかし、複数のアプリでこのディレクティブを再利用できるように、ディレクティブを (最終的には)単一のものよりも複雑にしたいと考えています。

では、ng-repeat 内に入るディレクティブを適切に作成するにはどうすればよいのでしょうか。私は何が欠けていますか？上記のコードから何を削除する必要がありますか?

4

6 に答える 6

8

ディレクティブがどこで始まり、どこで終わるかを考える必要があることに同意してください。これは、配列内の各項目にバインドされたディレクティブを示す plnkr です - http://plnkr.co/edit/IU8fANreYP7NYrs4swTW?p=preview

親スコープによって定義されたコレクションの列挙をディレクティブでカプセル化する場合は、少しトリッキーになります。以下が「ベストプラクティス」であるかどうかはわかりませんが、それは私がそれを処理した方法です - http://plnkr.co/edit/IU8fANreYP7NYrs4swTW?p=preview

ディレクティブに依存して反復を実行すると、トランスクルージョンに関与します。これは、(私が理解しているように)親で定義されたコンテンツを取得し、それをディレクティブにプッシュしてから評価することを意味する造語です。私は角度を数か月使用してきましたが、ディレクティブに反復を要求するのは臭いと思い始めており、常にそれを中心に設計することができました。

于 2013-04-02T02:31:31.357 に答える
2

これにアプローチする正しい方法は、次のように、オブジェクトを管理者名簿アイテムに送信することだと思います。

<tr ng-repeat="position in positions">
  <admin-roster-item pos="position">         
  </admin-roster-item>
</tr>

およびディレクティブで：

var app = angular.module("MyApp", []);

app.directive("adminRosterItem", function () {
  return {
    restrict: "E",
    scope: {
        pos: "@"
    },
    template: "<td>{{ formattedText }}</td>", // should I have this?
    link: function(scope, element, attrs){
        // all of this can easily be done with a filter, but i understand you just want to     
        // know how it works
        scope.formattedText = scope.pos.Name + ' (' + scope.pos.Code + ')';
    }
  }
});

PS。私はこれをテストしませんでした！

于 2013-04-02T02:29:21.093 に答える
1

ディレクティブを ng-repeat の子として記述する代わりに、カスタム ディレクティブを ng-repeat と同じレベルに維持してみてください。 

<tr ng-repeat="position in positions" admin-roster-item displayText="{{ position.Name + ' (' + position.Code + ')' }}"></tr>

さらに、カスタム ディレクティブを属性として使用できるようにします。AngulaJS は ng-repeat の優先度を 1000 と定義しているため、カスタム ディレクティブを作成すると、ng-repeat ではうまくいかないことがあります。

2 番目のオプション (最初のオプションが失敗した場合にのみ試してください) は、カスタム ディレクティブの優先度を ngRepeat の優先度よりも高く設定することです。つまり、1001 に設定します。

于 2016-04-27T10:52:09.490 に答える
0

ビューにディレクティブ ('mydirective') が含まれている場合、ビューの ng-repeat が評価されないという同様の問題がありました。

私のディレクティブの定義は

angular.module('myApp')
  .directive('myDirective', function () {
    return {
      templateUrl: 'components/directives/mydirective.html',
      restrict: 'EA',
      controller: 'MyDirectiveController',
      controllerAs: 'vm',
      link: function (scope, element, attrs) {
      }
    };
  });

私のView Controllerの定義は

  angular.module('myApp')
    .component('myView', {
      templateUrl: 'app/views/myview.html',
      controller: myViewComponent,
      controllerAs: "vm"
    });

「controllerAs」パラメーターを使用すると、両方のコントローラーが「vm」によって参照されていることがわかります。これが問題の原因です。ディレクティブがビューに存在する場合、angular はビューではなくディレクティブ コントローラーで定義された「vm」を常に参照します。

コントローラー参照に別の名前を付けると、問題はなくなりました

さて、私のディレクティブ定義は

angular.module('myApp')
  .directive('myDirective', function () {
    return {
      templateUrl: 'components/directives/mydirective.html',
      restrict: 'EA',
      controller: 'MyDirectiveController',
      controllerAs: 'directiveVM',
      link: function (scope, element, attrs) {
      }
    };
  });

私のView Controllerの定義は

  angular.module('myApp')
    .component('myView', {
      templateUrl: 'app/views/myview.html',
      controller: myViewComponent,
      controllerAs: "viewCtrlVM"
    });

それが役に立てば幸い。

于 2016-04-21T08:57:17.367 に答える