1

似たようなウィジェットをたくさん作成するディレクティブがあります。各ウィジェットの家と異なるディレクティブ。ウィジェットの作成に使用するテンプレートは次のとおりです。

template: '<li><div {{widgetModel.directiveName}}></div></li>'

変数を調整したり、テンプレートで使用する必要があるディレクティブを宣言したりしたいと考えています。テンプレートは次のようになります。

template: '<li><div directive-name></div></li>'

次に、属性名が の通常のディレクティブとして機能するようにしますdirectiveName。これは現在のコードでは発生しておらず、必要な動作をさせる方法がわかりません。directorName ディレクティブは、実際には何でもかまいません。

4

2 に答える 2

1

コンパイル機能でこれらの変更を行うことができます：

angular.module('myWidgets', [])
  .directive('multiDirective', function() {
    return {
        restrict: 'E',
        compile: function(element, attrs)
        {
            var htmlText = '<ul>' +
                    '<li ' + attrs.directiveName + '>' + '</li>' +
                '</ul>';
            element.replaceWith(htmlText);
        }
    }
})

そして、次のように呼び出すことができます。

<multi-directive directive-name='widget1' />
于 2013-11-05T04:45:56.917 に答える
0

別の投稿で参照されているAngular Dynamic Templatesブログ投稿のヒントに基づいて、CodePen の例を作成しました。

次のような HTML を作成するには、次のようにします。

<div ng-controller="ExampleCtrl">
  <div ng-repeat="dir in dirs">
    <div smart />
  </div>
</div>

コントローラーが次のようになっていると仮定します。

function ExampleCtrl($scope) {
   $scope.dirs = ["<div dir-a />","<div dir-b />"];
}

ディレクティブは次のsmartようになります。

.directive('smart', function($compile) {
   return {
      restrict: 'AE',
      link: function (scope, element) {
         element.html(scope.dir);
         $compile(element.contents())(scope);
      }
   };
});
于 2013-11-05T05:05:06.087 に答える