Question

我对数据网格初始化代码有点厌倦，所以我正在尝试使用AngularJS。我想像我这样指定我的数据网格：

<grid src="http://my/web/service" page-size="10">
    <column name="one" label="My First Column" />
    <column name="two" label="My Second Column" />
    <column name="three" label="My Last Column">
        <value id="true" label="Yay" />
        <value id="false" label="Nay" />
    <column>
</grid>

基本上，我试图用简单的xml（非js）语义配置网格而不是笨拙的初始化器。为此，我创建了三个指令，外部最多指令也有一个模板，它将显示网格。

问题是：为外部元素配置模板时，内部元素未链接（这是配置网格所必需的）。我也不想转换内部元素。

问题是：如何访问网格元素的原始内容？模板元素/元素实例的内容都是模板的内容。

您可以在http://plnkr.co/edit/rb9yyogQEmoLXFhWpl8F

检查我的代码

Answer 1

您不能使用指令定义对象的template或templateUrl属性，因为它会覆盖该元素所具有的任何内容。

您需要自己添加模板。

.directive("grid", function(){
   return {
      //...
      link: function(scope, element){
         // this assumes that your child directives have registered themselves and 
         // are no longer needed
         element.empty();
         var templateUrl = "grid.html";
         element.append("<div ng-include='\"" + templateUrl + "\"'></div>");
         $compile(element.contents())(scope);
      }
   }
})

当使用templateUrl的父指令时，不会调用AngularJS子指令

1 个答案: