javascript Angular 1.5 组件方法 templateUrl + 函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33841909/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular 1.5 component method templateUrl + function
提问by tuvokki
I'm trying to get an app working with angular 1.5.0-beta.2
我正在尝试让应用程序使用 angular 1.5.0-beta.2
To make a 'directive' I have the following code:
要制定“指令”，我有以下代码：
myApp.component('gridshow', {
bindings: {
slides: '='
},
controller: function() {
},
controllerAs: 'grid',
template: function ($element, $attrs) {
// access to $element and $attrs
return [
'<div class="slidegrid">',
'<div ng-repeat="slide in grid.slides">',
'{{slide.image}}',
'</div>',
'</div>'
].join('')
}
});
I like the idea of the template that returns a function with access to $elementand $attrsbut how do I combine this with a templateUrl?
我喜欢模板的想法，返回一个能够访问功能$element和$attrs但我如何结合这与templateUrl？
回答by Estus Flask
In 1.5.0-beta.2 templateUrlcan be a function that is invoked by injector. $elementand $attrsare injectedinto both templateand templateUrlfunctionsin component, as well as any other dependencies.
在 1.5.0-beta.2 中templateUrl可以是由注入器调用的函数。$element和$attrs注入到两个template和templateUrl功能中component，以及任何其他依赖关系。
This means that
这意味着
...
templateUrl: function ($element, $attrs) {
// access to $element and $attrs
...
return $attrs.uninterpolatedTemplateUrl;
}
can be done instead.
可以代替。
回答by Backer
@estussolution worked for me until I uglified my scripts. Uglified it gave the following error:
@estus解决方案对我有用，直到我丑化了我的脚本。丑化它给出了以下错误：
Error: [$injector:unpr] Unknown provider: eProvider <- e
The solution that worked for me is:
对我有用的解决方案是：
['$element', '$attrs', function($element, $attrs) {
return $attrs.uninterpolatedTemplateUrl;
}]
回答by Mohan Singh
I solved this problem by following technique. This may help you.
我通过以下技术解决了这个问题。这可能对你有帮助。
Template
模板
<div data-ng-repeat="field in $ctrl.fields track by $index">
<render-field data-field-type="{{field.type}}"></render-field>
</div>
A component
一个组件
/**
* @ngdoc Component
* @name app.component.renderField
* @module app
*
* @description
* A component to render Field by type
*
* @author Mohan Singh ( gmail::[email protected], skype :: mohan.singh42 )
*/
(function () {
'use strict';
angular
.module('app')
.component('renderField', {
bindings: {
fieldType: '@',
},
template: '<div ng-include="$ctrl.templateUrl">',
controller: [
function () {
var $ctrl = this;
$ctrl.$onInit = initialization;
$ctrl.$onDestroy = onDestroy;
$ctrl.$onChanges = onChanges;
/**
* public properties
*/
/**
* public methods
*/
/**
* @function
* @name initialization
* @description
* A component's lifeCycle hook which is called after all the controllers on an element have been constructed and had their bindings initialized
*/
function initialization() {
}
/**
* @function
* @name onChanges
* @description
* A component's lifeCycle hook which is called when bindings are updated.
*/
function onChanges(bindings) {
if(bindings.fieldType && bindings.fieldType.isFirstChange()){
//$ctrl.fieldType['text' | 'textarea' | 'select' | 'radio']
$ctrl.templateUrl = 'partials/fields/'+$ctrl.fieldType+'.html';
}
}
/**
* @function
* @name onDestroy
* @description
* A component's lifeCycle hook which is called when is called on a controller when its containing scope is destroyed.
* Usefull to release external resources, watches and event handlers.
*/
function onDestroy() { }
}]
});
})();
