1

動的テンプレートでディレクティブを作成しようとしています

app.directive('boolInput', function () {
  'use strict';

  var
    restrict = 'E',
    replace = true,
    template = '<ng-include src="template"></ng-include>',
    scope = {
        value: "=",
        template: "@"
    },
    link = function (scope, element, attributes) {
        // some stuff
    };

  return {
    link: link,
    restrict: restrict,
    replace: replace,
    template: template,
    scope: scope,
    transclude: true
  };
});

だから私は使う

template = '<ng-include src="template"></ng-include>'

scope = {
        //..
        template: "@"
    }

属性を介してテンプレートの URL を渡します。1つのことではなく、すべてがうまく機能します。ディレクティブの使用方法は次のとおりです。

<bool-input data-value="item.value" data-ng-repeat="item in source" data-  template="templates/boolInput.html">
    {{item.Text}}
</bool-input>

{{item.Text}} - should be transcluded into template

そのテンプレート:

<div class="checkbox">
    <label class="checkbox-custom" ng-transclude>
        <input type="checkbox">
        <i class="icon-unchecked checked"></i>
    </label>
</div>

しかし、これは起こりません。結果として、次のようになります。

<ng-include src="template" data-value="item.value" data-ng-repeat="item in data" data-template="templates/boolInput.html" class="ng-scope"><div class="checkbox ng-scope">
    <label class="checkbox-custom" ng-transclude="">
        <input type="checkbox">
        <i class="icon-unchecked checked"></i>
        <!-- There should be the text -->
    </label>
</div></ng-include>
4

1 に答える 1