Javascript 将多个模板作为HTML注入指令并编译到指令范围_Javascript_Angularjs_Templates_Angularjs Directive

Javascript 将多个模板作为HTML注入指令并编译到指令范围

javascript angularjs templates

Javascript 将多个模板作为HTML注入指令并编译到指令范围,javascript,angularjs,templates,angularjs-directive,Javascript,Angularjs,Templates,Angularjs Directive,我正在开发一个自定义角度指令，其主要目标是显示数据网格。我想允许我的指令的用户将他们自己的html单元格模板注入其中，这将覆盖标准单元格呈现机制。当然，我可以让用户在json配置对象中定义他们的单元格模板，并使用属性将其传输到我的指令中，但我认为更好的方法是让用户直接将他们的模板指定为HTML 预期用途现在，我在指令中使用link函数的transclude方法来收集指令控制器可用的模板。但是transclude函数返回已编译的html，并且html编译的范围当然是使用页面的控制器。这意味着注

我正在开发一个自定义角度指令，其主要目标是显示数据网格。我想允许我的指令的用户将他们自己的html单元格模板注入其中，这将覆盖标准单元格呈现机制。当然，我可以让用户在json配置对象中定义他们的单元格模板，并使用属性将其传输到我的指令中，但我认为更好的方法是让用户直接将他们的模板指定为HTML

预期用途

现在，我在指令中使用link函数的transclude方法来收集指令控制器可用的模板。但是transclude函数返回已编译的html，并且html编译的范围当然是使用页面的控制器。这意味着注入的单元模板不可能使用提供给grid指令的数据中的值进行转换

为了实现这一点，内部的所有内容都需要注入未编译。但这似乎是不可能的。我甚至连接到compile方法，看看是否可以直接从$element输入参数获取给定的元素，但即使这样也太迟了。此时，来自其他包含的指令的模板已经包含，覆盖了元素

有没有人能告诉我怎样才能实现我的目标

我的指令

修好了。秘密在于transclude函数接收作用域。我只需要保存它，并在编译模板时使用它：-

下面是我的指令的一个版本，它按预期工作！

角度。模块'myApp'，[] .controller'myController'，函数$scope{ "严格使用",； //网格结构的简化元数据 $scope.config={ 列：[{name:'id'}，{name:'name'}，{name:'active'}，{name:'comment'}] }; //为指令提供数据 $scope.data=[ {id:1，名称：'test1'，活动：true，注释：'containmentsomething'}， {id:2，名称：'test2'，活动：false，注释：'other comment'} ]; } .directive'myGrid'，['$timeout'，'$compile'，函数$timeout，$compile{ "严格使用",；返回{ 限制：'E'， templateUrl:'grid/templates/gridPanel.html'，是的， controllerAs:'gridCtrl'， bindToController：对，范围：{ 配置：'='，数据：'=' }, 链接：函数postLink$scope、$element、$attrs、ctrl、$transclude{ //设置默认单元格模板 var defaultTemplates=[ $'{{row[column.name]}}.get0 ]; //收集给定的单元格模板--------- $transcludefunctionoverrides，futureScope{ 转移的var={ tpls:u.filteroverrides，函数内容{ return content.nodeName.toUpperCase==='CELL'； }, 范围：未来范围 }; transcluded.tpls=transcluded.tpls.concatdefaultTemplates；//插入默认值 //向控制器作用域公开单元模板 ctrl.cellTemplates=\uu0.chaintranscluded.tpls //按列名分组 .groupByfunctiontpl{return$tpl.attr'field'；} //创建模板对象 .mapValuesfunctiontpl{ var template=$tpl.html.trim；返回{ 第三方物流：模板，包括：$tpl.HASSCLASS'ng-scope'， origScope:$tpl.hasClass'ng-scope'？transcluded.scope:null，//保存模板所包含的原始范围 compiledFn:$compiletemplate//预编译模板 }; } 价值 //创建基于列名检索模板的方便方法 ctrl.getTemplate=函数列{ 返回u.hasctrl.cellTemplates，column.name？ctrl.cellTemplates[column.name]：ctrl.cellTemplates.\uuuu ALL\uuu； } }; }, 控制器：['$scope'，'$element'，函数$scope，$element{ var ctrl=this； }] }; }] .指令'myGridCell'，函数{ "严格使用",；返回{ 限制：“A”，要求：“^myGrid”，范围：{ 列：'=myGridCell'，//这是此列的配置对象行：“=”，//包含整行的数据 rowIndex:“=”//网格数据集中的行索引 }, 链接：函数$scope、$element、$attrs、ctrl{ 变量me={ childScope:null， renderTemplate：函数{ $element.empty； //检索给定列的模板 var tpl=ctrl.getTemplate$scope.column； //清理旧的乐趣如果me.childScope&&me.childScope.$id！==$scope.$id{ me.childScope.$destroy； } //获取或创建子作用域如果包括第三方物流{ //创建一个新的作用域作为被转移的作用域的子作用域 me.childScope=tpl.origScope.$new； //将重要属性附加到新创建的范围 me.childScope.row=$scope.row； me.childScope.column=$scope.column； me.childScope.rowIndex=$scope.rowIndex； }否则{ me.childScope=$scope； } //将控制器连接到childScope me.childScope.gridCtrl=ctrl； //在适当的范围内应用模板 tpl.compiledFnme.childScope，函数clonedElement，作用域{ 范围.$element=clonedElement； $element.appendclonedElement； }; } } me.renderTemplate； } } } .运行['$templateCache'，函数$templateCache{ "严格使用",； $templateCache.put'grid/templates/gridPanel.html'， + ' ' + “测试网格”+ ' ' + ' ' + ' ' + ' ' + ' ' + ' ' + “{column.name}}”+ ' ' + ' ' + ' ' + ' ' + ' ' + ' ' + ' ' + ' ' + ' ' + ' ' + ' ' + ; }]; 我的网格设置

为什么不让他们给你一个html字符串，然后用它来编译和使用呢。我不认为我完全理解您正在尝试做什么，以及您希望人们如何为您提供html。正如我在问题中所说的，我可以让他们将html注入json配置字符串中，并将其作为属性传递给上面的指令see params=，但我认为更好的方法是让用户将他们的模板指定为HTML，并查看上面单元格元素的内容。也许您应该创建一个解决问题的工具。您可以尝试使用textarea，而不是将html作为字符串提供给您的单元格，您可以编译它。很难说，您的问题和需求还不清楚。我们已经包含了一个可运行的代码段，它描述了我的指令以及它应该如何工作

    <my-grid config="config" data="data">
      <cell field="active">
        <!-- User templates given here for specific columns -->
      </cell>
    </my-grid>