1

これが私のリクエストです。ディレクティブを使用して、上記のこの構造を生成しようとしています:

<div class='myClass'>
    <input id="id0" name="name0" type="radio" checked>
    <label for="id0" ng-click="myAction('0')"> 0</label>

    <input id="id1" name="name1" type="radio">
    <label for="id1" ng-click="myAction('1')"> 1</label>

    <input id="id2" name="name2" type="radio">
    <label for="id2" ng-click="myAction('2')"> 2</label>

    ...3,4,5...

    span(class="endSpanClass")

それほど些細なことではありません:

私は多くの方法でディレクティブを使用しようとしました.ng-repeatですが、この入力/ラベルのペアを一緒に取得することに成功しません.この例と同じ順序で入力+ラベルを意味します.

次に、最初の要素で、「checked」属性を取得することを期待しています。

最後のスパンも最後に設定する必要があります。

そういう試み

.directive('myDirective', ['$timeout', function(timeout) {
    return {
      restrict: 'A',
      controller: 'MyController',
      scope: {myList: '='},
      template: '<input id="id0" name="view" type="radio">' +
      '<label for="id0" ng-click="myAction(\'day\'> 0 </label>',
      transclude: false,                    
      replace: true,
      link: function($scope, element, attr, ctrl) {


      }
    };
}])

そして私の指令呼び出し

div(class='myClass')
    input(my-directive, my-list='list', ng-repeat="item in list", id="0", name="name0", type="radio")

何も与えない、

あなたが助けてくれたり、アドバイスをくれたりしたら、ありがとう。

J.

4

2 に答える 2

1

以下は私がすることです：

<label ng-repeat="name in names">
  <input name="{{name}}" type="radio"
   ng-checked="$index==0"
   ng-click="myAction($index)"/>
  {{$index}}
</label>

  1. コードを簡素化するフォームコントロールをラップするlabelと、どのラベルがどのコントロールを制御するかが非常に明確になります。(単なる標準的な html テクニックです。)

  2. ng-checkedチェックされた状態を制御するために使用します。

  3. 多くの場所で何度も使用されない限り、この短いコードにディレクティブを使用することは避けます。

  4. ディレクティブを使用する場合、テンプレートには単一のルート要素が必要です。（したがって、実際には上記の手法 [1] に頼ることができます。）

于 2013-06-03T02:41:24.857 に答える
1

簡単なディレクティブの定義は次のとおりです。

app.directive('myDirective', ['$timeout', function(timeout) {
    return {
      restrict: 'E',      
      scope: {id: '='},
      template: '<div><input id="id{{id}}" name="view" type="radio">' +
      '<label for="id{{id}}" ng-click="myAction(\'{{id}}\')">{{id}}</label></div>',      
      replace: true
    };
}])

実際の例とともに: http://plnkr.co/edit/spQRs5xs43P1FOX7YQzH?p=preview

于 2013-06-03T03:37:42.633 に答える