0

ドロップダウン要素を生成するカスタム ディレクティブを作成しています。分離スコープを使用すると、コンパイル関数はテンプレートを変換しません。

ほとんどの場合、ディレクティブで提供されている select 要素の ng-options を変更しています。分離スコープで同じことを達成するにはどうすればよいですか?

myApp.directive('helloWorld', function () {
  return {
    restrict: 'E',
    replace: true,
    scope: {
      id:'@',
      label:'@'
    },
    template: '<div class="control-group">' +
                '   <label for="{{id}}" class="control-label">{{label}}</label>' +
                '   <div class="controls">' +
                '       <select id="{{id}}" class="medium m-wrap">' +
                '       </select>' +
                '   </div>' +
                '</div>',
  },
  compile:function(tElement, tAttrs, transclude){
   var opts = tAttrs.textField 
    ?'item.' + tAttrs.textField + (tAttrs.groupBy ? ' group by item.' + tAttrs.groupBy : '') + ' for item in ' + tAttrs.itemSource
    :'item for item in ' + tAttrs.itemSource;

    tElement.find('select').attr('ng-options',opts);
  }
});
4

1 に答える 1

0

問題は{{label}}、分離スコープに存在しないことです。親スコープへの参照をディレクティブ内の分離スコープに渡すことで、これを解決できます。

   return {
       restrict: 'E',
       replace: true,
       scope: {
           id:'@',
           label:'@'
       },
       // in the directive!
       controller : function($scope){
           $scope.label = $scope.$parent.label;
       }

ただし、これは推奨されるパラダイムではありません。これは、ディレクティブがリッスンできる唯一のデータが「名前付き」であることを意味するためです。そのため、属性を使用することをお勧めします (これは、あなたが行っているように見えます)。そう...

 // in the directive!
 controller : function($scope, $attrs){
    $scope.$parent.$watch($attrs.itemSource, function(itemSource){
        $scope.itemSource = itemSource;
    });
 }

それらの線に沿った何か。

于 2013-08-29T01:44:44.123 に答える