我怎样才能创建一个动态模板指令？
'use strict';
app.directive('ngFormField', function($compile) {
return {
transclude: true,
scope: {
label: '@'
},
template: '<label for="user_email">{{label}}</label>',
// append
replace: true,
// attribute restriction
restrict: 'E',
// linking method
link: function($scope, element, attrs) {
switch (attrs['type']) {
case "text":
// append input field to "template"
case "select":
// append select dropdown to "template"
}
}
}
});
<ng-form-field label="First Name" type="text"></ng-form-field>
这就是我现在所拥有的，它是正确显示的标签。 但是，我不知道如何将其他HTML追加到模板。 或2个模板组合成1。
也有类似的需求。 $compile做这项工作。 （不能完全肯定，如果这是“”的方式做到这一点，还是通过角工作我的方式）
http://jsbin.com/ebuhuv/7/edit -我的探索试验。
有一点要注意（按我的例子），我的要求之一是，模板会改变基于一种type属性，一旦你点击保存，模板是非常不同的。 所以，虽然，你得到的数据绑定，如果需要有一个新的模板，你将不得不重新编译。
我已经使用了$ templateCache来完成类似的东西。 我把几个纳克的模板在一个HTML文件，这是我参考使用该指令的templateUrl。 这确保HTML是提供给模板缓存。 那么我可以简单地通过ID选择，以获得NG-模板，我想。
template.html：
<script type="text/ng-template" id=“foo”>
foo
</script>
<script type="text/ng-template" id=“bar”>
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);
}
};
}]);
你应该使用“移动交换机到模板NG-开关 ”指令：
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' +
' ng-switch-when="text"' +
' name="{{field.name}}"' +
' type="text"' +
' ng-model="field.value"' +
' />' +
' <select' +
' ng-switch-when="select"' +
' name="{{field.name}}"' +
' ng-model="field.value"' +
' ng-options="option for option in options">' +
' <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 title="Email" name="email" field-type="text" value="me@example.com"></form-field>
<form-field title="Role" name="role" field-type="select" options="['Cook', 'Eater']"></form-field>
<form-field title="Sex" name="sex" field-type="select" options="['Awesome', 'So-so', 'awful']"></form-field>
</test-form>
如果你想使用AngularJs指令与动态模板，你可以使用这些问题的答案，但在这里是比较专业和法律的它的语法。 您可以使用templateUrl不仅单value.You可以使用它作为一个函数，该函数返回一个值作为URL。那函数有一些参数，您可以使用。
http://www.w3docs.com/snippets/angularjs/dynamically-change-template-url-in-angularjs-directives.html
一种方法是使用在你的指令模板函数：
...
template: function(tElem, tAttrs){
return '<div ng-include="' + tAttrs.template + '" />';
}
...
我设法解决这个问题。 下面是链接：
https://github.com/nakosung/ng-dynamic-template-example
与特定文件的存在：
https://github.com/nakosung/ng-dynamic-template-example/blob/master/src/main.coffee
dynamicTemplate指令的主机，其范围之内传递和托管元件的作用就像其他本地角元件的动态模板。
scope.template = '< div ng-controller="SomeUberCtrl">rocks< /div>'
我一直在同样的情况，我的完整的解决方案已经公布在这里
基本上我的指令，以这种方式加载模板
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个模板之一，在一个时间只有其中的一个必要时被示出。
我heope它帮助。
