如何使用动态模板创建指令 AngularJS?

我用了 $templateCache 实现这样的东西。 我在一个文件中放置几个​​ng模板 html, 我在指令的帮助下引用 templateUrl, 有什么保证可访问性 html 用于缓存模板。 然后我可以选择 id, 获取您需要的NG-Template。

template.html:

<script id="“foo”" type="text/ng-template">

foo

</script>

<script id="“bar”" type="text/ng-template">

bar

</script>

指示：

myapp.directive/‘foobardirective’, ['$compile', '$templateCache', function /$compile, $templateCache/ {



 var getTemplate = function/data/ {

 // use data to determine which template to use

 var templateid = 'foo';

 var template = $templateCache.get/templateid/;

 return template;

 }



 return {

 templateUrl: 'views/partials/template.html',

 scope: {data: '='},

 restrict: 'E',

 link: function/scope, element/ {

 var template = getTemplate/scope.data/;



 element.html/template/;

 $compile/element.contents////scope/;

 }

 };

}]/;

有同样的需求。

$compile

做他的工作。 /不太确定 "THE" 去做的方式，但仍在努力 angular/

http://jsbin.com/ebuhuv/7/edit
- 研究测试。

应该指出的是 /在我的例子中/, 我的要求之一是模板将根据属性而更改

type

, 单击“保存”按钮后，模板将非常不同。 所以，虽然你得到了 data binding, 如果您需要一种新模式，您将不得不重新编译它。

您必须使用指令将切换器移动到模板 '
https://docs.angularjs.org/api ... witch
' :

module.directive/'testForm', function// {

 return {

 restrict: 'E',

 controllerAs: 'form',

 controller: function /$scope/ {

 console.log/"Form controller initialization"/;

 var self = this;

 this.fields = {};

 this.addField = function/field/ {

 console.log/"New field: ", field/;

 self.fields[field.name] = field;

 };

 }

 }

}/;



module.directive/'formField', function // {

 return {

 require: "^testForm",

 template:

 '<div ng-switch="field.fieldType">' +

 ' <span>{{title}}:</span>' +

 ' <input' '="" +="" name="{{field.name}}" ng-model="field.value" ng-switch-when="text" type="text"></input'>' +

 ' <select' '="" +="" name="{{field.name}}" ng-model="field.value" ng-options="option for option in options" ng-switch-when="select">' +

 ' <option value=""></option>' +

 ' ' +

 '</select'></div>',

 restrict: 'E',

 replace: true,

 scope: {

 fieldType: "@",

 title: "@",

 name: "@",

 value: "@",

 options: "=",

 },

 link: function/$scope, $element, $attrs, form/ {

 $scope.field = $scope;

 form.addField/$scope/;

 }

 };

}/;

它可以用这样用来：

<test-form>

<div>

 User '{{!form.fields.email.value}}' will be a {{!form.fields.role.value}}

 </div>

<form-field field-type="text" name="email" title="Email" value="me@example.com"></form-field>

<form-field field-type="select" name="role" options="['Cook', 'Eater']" title="Role"></form-field>

<form-field field-type="select" name="sex" options="['Awesome', 'So-so', 'awful']" title="Sex"></form-field>

</test-form>

一种方法是在指令中使用模板函数：

...

template: function/tElem, tAttrs/{

 return '<div ng-include="' + tAttrs.template + '"></div>';

}

...

如果您想使用该指令 AngularJs 使用动态模式，您可以使用这些答案，但更多

专业的

和

合法的

句法。

您可以使用 templateUrl 不仅有一个价值。 您可以将其用作返回值的函数 url

. 此功能有一些您可以使用的参数。

http://www.w3docs.com/snippets ... .html

我设法应对这个问题。 以下是一个链接 :

https://github.com/nakosung/ng ... ample
使用特定文件，即：

https://github.com/nakosung/ng ... offee
指示

dynamicTemplate

包含在操作字段中传输的动态模板，锁定的项目和其他元素 angular.

scope.template = '< div ng-controller="SomeUberCtrl">rocks< /div>'

我处于同样的情况下我的

完整的解决方案

它发表了
https://coderoad.ru/16942419/
主要是我以这种方式下载指令中的模板

var tpl = '' + 

 <div ng-if="maxLength" ng-include="\'length.tpl.html\'">

</div>' +

 '<div ng-if="required" ng-include="\'required.tpl.html\'">

</div>';

然后按照价值观

maxLength

和

required

我可以动态下载其中一个 2 模板，如有必要，一次只显示其中一个。

我知道它有所帮助。