AngularJS - 指令中的不同模板

Question

我有一个基于 twitter bootstrap 的表单，每个字段都有自己的配置

// controller (the template shows this in ng-repeat

$scope.fields = [{name:"f1", label:"Field 1", with_button: false},
                 {name:"f2", label:"Field 2", with_button: true}]

我正在尝试制作一个“条件指令”，根据“field.with_button”自定义模板

// Without button
<div class="controls">
    <input type="text" id="i_{{field.name}}">
</div>

// With button
<div class="controls">
    <div class="input-append">
        <input type="text" id="i_{{field.name}}">
        <span class="add-on">bt</span>
    </div>
</div>

我搜索了很多，没有找到任何解决方案，我尝试只创建一个 div 并使用编译器函数将内容放入其中，但它没有解析，如果我调用 $apply它崩溃了。

我怎样才能制定这个指令？

错误我最后一次尝试:

angular.module('mymodule',[]).directive('ssField', function() {
    return {
        transclude:false,
        scope: {
            field: '='
        },
        restrict: 'E',
        replace:true,
        template: '<div class="controls">{{innerContent}}</div>',
        controller: ['$scope', '$element', '$attrs', function($scope, $element, $attrs) {
            $scope.$eval('$scope.innerContent = \'<input type="text" id="input_{{field.name}}" placeholder="{{field.name}}" class="input-xlarge">\'');
        }]
    };
});

//<ss-field field="{{field}}"></ss-field>

Answer 1

您可以使用 $http 和 $compile 服务来完成您想要的操作。

http://plnkr.co/edit/Xt9khe?p=preview

这个 plnkr 应该演示需要做什么，但基本上:

1. 根据情况使用$http加载模板。
2. 使用 $compile 在当前范围内编译加载的模板。

angular.module('mymodule',[]).directive('ssField', ['$http', '$compile', function($http, $compile) {
    return {
        transclude:false,
        scope: {
            field: '='
        },
        restrict: 'E',
        replace:true,
        template: '<div class="controls"></div>',
        link: function(scope, element, attrs) {
          var template;
          var withButtonTmpl = 'with_button.html';
          var withoutButtonTmpl = 'without_button.html';

          if (scope.field.with_button) {
            $http.get(withButtonTmpl).then(function(tmpl) {
              template = $compile(tmpl.data)(scope);
              element.append(template);
            });
          } else {
            $http.get(withoutButtonTmpl).then(function(tmpl) {
              template = $compile(tmpl.data)(scope);
              element.append(template);
            });
          }
        }
    };
}]);

您可以更改指令以使其更加健壮，以便 URL 不会直接嵌入指令中以实现可重用性等，但概念应该类似。