如何创建自定义指令angularjs动态模板？ [英] How to create angularjs dynamic template with custom directives?
问题描述
我想创建某种模板与angularjs使用自定义指令，然后根据这些指令它创建输入字段，例如，如果你有这样的指令在模板的属性：
＆LT; CMS：输入类型=文本大小= '14'默认='这是一个文本标签='内容标题'＆GT;＆LT; / CMS：输入＆GT;＆LT; CMS：输入类型='textarea的'大小= '50'默认='这是一个文本区域标签='内容段落'＆GT;＆LT; / CMS：输入＆GT;
这就是指令的code
app.directive（'cmsInput'，函数（）{
返回{
限制：'E'，
要求：'^ ngModel'，
范围： {
默认：@default'，
名称：'@name'，
大小：'@size'，
类型：'@type'
}，}）;
我想在主页做ngInclude的模板，然后根据指令它上面应该显示的属性例如用于指示显示的字段：使用默认文本的文本字段，这是一个文本与文本内容标题和一个文本框进行相应的属性标签
因此，为了使事情基本我会告诉我想要什么没有技术术语：所以我想要做的是创建一个包含该指令将其用作例如模板mainPage.html'，'头不同的HTML页面。 HTML，而这些模板包含占位符文本一整页，占位符应该是这个指令。
然后在另一个页面，您应该指定要使用的模板，并根据模板应该动态地创建输入字段中的占位符
如此看来，你想拥有的页面的任意数都显得pretty大致相同，但每个标签不同的文本，每标题和帮助文本等？
要解决这个问题，我们需要的只是一个常规视图（模板）和变量在不同的路由（范围）持有不同的数据。
您将需要角路线。
有是，这似乎是pretty接近你想要做什么的教程。
https://docs.angularjs.org/tutorial/step_07
VAR formApp = angular.module（'formApp'，[\r
ngRoute'，\r
formAppControllers\r
]）;\r
\r
formApp.config（['$ routeProvider'，\r
功能（$ routeProvider）{\r
$ routeProvider。\r
当（'/第一'，{\r
templateUrl：form.html'，\r
控制器：'firstCtrl\r
}）。\r
当（'/秒'，{\r
templateUrl：form.html'，\r
控制器：'secondCtrl\r
}）\r
。除此以外（{\r
redirectTo：'/第一'\r
}）;\r
}]）;\r
\r
\r
VAR formAppControllers = angular.module（'formAppControllers'，[]）;\r
\r
formAppControllers.controller（'firstCtrl'，['$范围，$ HTTP，\r
功能（$范围，$ HTTP）{\r
$ scope.title =首冠;\r
$ scope.firstLabel ='正牌';\r
}]）;\r
\r
formAppControllers.controller（'secondCtrl'，['$范围，$ HTTP，\r
功能（$范围，$ HTTP）{\r
$ scope.title ='二标题;\r
$ scope.firstLabel ='第二个标签;\r
}]）; \r
＆LT;脚本SRC =https://cdnjs.cloudflare.com/ajax /libs/angular.js/1.3.9/angular.js\"></script>\r
＆LT;脚本src=\"https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.9/angular-route.min.js\"></script>\r
\r
\r
＆LT;脚本类型=文/ NG-模板ID =form.html＆GT;\r
＆LT; DIV CLASS =查看＆GT;\r
＆LT; H2＆GT;的{{title}}＆LT; / H＆GT;\r
\r
＆LT;标签＆gt; {{firstLabel}}＆LT; /标签＆gt;\r
＆LT;输入类型=文本NG模型=firstInput＆GT;\r
＆LT; / DIV＆GT;\r
＆LT; / SCRIPT＆GT;\r
\r
＆LT; DIV NG-应用=formApp＆GT;\r
＆LT; DIV NG-视图＆gt;＆LT; / DIV＆GT;\r
＆LT; / DIV＆GT; \r
的不同文本串必然含{{}}在模板在控制器的$范围
每个线路都有独立的控制器，数据填充到$范围。 （你可以使用routeParams以及到只有一个控制器）。
您可以有模板内联这个样子，或者在一个单独的文件中。
请注意，这个例子不会计算器运行，但应该让你去。
原来的答案
也许像这样有根据类型动态templateUrl？
.directive（'cmsInput'，函数（）{
返回{
限制：'E'，
要求：'^ ngModel'，
templateUrl：功能（ELEM，ATTR）{
回报cmsinput-'+ attr.type +'的.html';
}
};
}）;
您可以用一个动态模板去为好，对scope.type一个NG-开关。
directive.cmsinput.js
.directive（'cmsInput'，函数（）{
返回{
限制：'E'，
要求：'^ ngModel'，
范围： {
默认：@default'，
名称：'@name'，
大小：'@size'，
类型：'@type'
}，
templateUrl：directive.cmsinput.html
};
}）;
directive.cmsinput.html
＆LT;标签＆gt; {{标签}}＆LT; /标签＆gt;
＆lt;节NG-开关=输入＆GT;
＆LT; DIV NG-开关时=textarea的＆GT;
＆LT; textarea的NG-模式=$ parent.something占位符={{占位符}}＆GT;
＆LT; / DIV＆GT;
＆LT; DIV NG开关默认＆GT;
＆LT;输入类型=文本NG模型=$ parent.something＆GT;
＆LT; / DIV＆GT;
＆LT; /节＆gt;
请注意使用$父，因为NG-开关创建一个子范围，你可能想字段值传播到指令的范围。
I want to create some kind of template with angularjs that uses custom directives and then according to the attributes of these directives it creates input fields, for example if you have this directive in the template :
<cms:input type='text' size='14' default='this is a text' label='Content Header' ></cms:input>
<cms:input type='textarea' size='50' default='this is a text area' label='Content Paragraph' ></cms:input>
and this is the code of the directive
app.directive('cmsInput', function() {
return {
restrict: 'E',
require: '^ngModel',
scope: {
default: '@default',
name: '@name',
size: '@size',
type: '@type'
},
});
i want in the main page to do a ngInclude to the template and then show the fields according to the attributes of the directive for example for the directives above it should shows : a text field with the default text this is a text and a label with the text 'Content Header' and a textfield with the attributes accordingly
So to make the things basic i will tell what i want without technical terms : so what i want to do is create different html pages that contains this directives to use them as templates for example 'mainPage.html', 'header.html', and these templates contains a whole page with placeholders for the texts, the placeholders should be this directives.
And then in another page you should specify which template to use, and according to the placeholders in the template it should create input fields dynamically
So it seems that you want to have an arbitrary number of pages that all look pretty much the same, but have different text for each labels, each headers and help texts etc?
To solve this we just need a regular view (template) and variables that hold different data on different routes (scope).
You will need angular-route.
There is a tutorial that seems to be pretty close to what you want to do. https://docs.angularjs.org/tutorial/step_07
var formApp = angular.module('formApp', [
'ngRoute',
'formAppControllers'
]);
formApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/first', {
templateUrl: 'form.html',
controller: 'firstCtrl'
}).
when('/second', {
templateUrl: 'form.html',
controller: 'secondCtrl'
})
.otherwise({
redirectTo: '/first'
});
}]);
var formAppControllers = angular.module('formAppControllers', []);
formAppControllers.controller('firstCtrl', ['$scope', '$http',
function ($scope, $http) {
$scope.title = 'First Title';
$scope.firstLabel = 'First Label';
}]);
formAppControllers.controller('secondCtrl', ['$scope', '$http',
function ($scope, $http) {
$scope.title = 'Second Title';
$scope.firstLabel = 'Second Label';
}]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.9/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.9/angular-route.min.js"></script>
<script type="text/ng-template" id="form.html">
<div class="view">
<h2>{{title}}</h2>
<label>{{firstLabel}}</label>
<input type="text" ng-model="firstInput">
</div>
</script>
<div ng-app="formApp">
<div ng-view></div>
</div>
The different text strings is bound with {{}} in the template to the $scope in the controller.
Each route has a separate controller that populates data into $scope. (you could use routeParams as well to have just one controller).
You could have the template inline like this, or in a separate file.
Note that this example will not run in stackoverflow, but should get you going.
Original Answer
Perhaps something like this with a dynamic templateUrl depending on type?
.directive('cmsInput', function() {
return {
restrict: 'E',
require: '^ngModel',
templateUrl: function(elem, attr) {
return 'cmsinput-' + attr.type + '.html';
}
};
});
You could go with a dynamic template as well, with a ng-switch on scope.type.
directive.cmsinput.js
.directive('cmsInput', function() {
return {
restrict: 'E',
require: '^ngModel',
scope: {
default: '@default',
name: '@name',
size: '@size',
type: '@type'
},
templateUrl: directive.cmsinput.html
};
});
directive.cmsinput.html
<label>{{label}}</label>
<section ng-switch="type">
<div ng-switch-when="textarea">
<textarea ng-model="$parent.something" placeholder="{{placeholder}}">
</div>
<div ng-switch-default>
<input type="text" ng-model="$parent.something">
</div>
</section>
Note the use of $parent, since the ng-switch creates a child scope and you probably want the field value to propagate to the directive's scope.
这篇关于如何创建自定义指令angularjs动态模板？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
