diff --git a/src/templateFactory.ts b/src/templateFactory.ts index 76619c57e..1cb898cca 100644 --- a/src/templateFactory.ts +++ b/src/templateFactory.ts @@ -4,7 +4,7 @@ import { ng as angular } from "./angular"; import { IAugmentedJQuery } from "angular"; import { isArray, isDefined, isFunction, isObject, services, Obj, IInjectable, tail, kebobString, unnestR, ResolveContext, - Resolvable, RawParams, prop + Resolvable, RawParams } from "@uirouter/core"; import { Ng1ViewDeclaration, TemplateFactoryProvider } from "./interface"; @@ -33,13 +33,13 @@ export class TemplateFactory implements TemplateFactoryProvider { * Creates a template from a configuration object. * * @param config Configuration object for which to load a template. - * The following properties are search in the specified order, and the first one + * The following properties are search in the specified order, and the first one * that is defined is used to create the template: * * @param params Parameters to pass to the template function. * @param context The resolve context associated with the template's view * - * @return {string|object} The template html as a string, or a promise for + * @return {string|object} The template html as a string, or a promise for * that string,or `null` if no template is configured. */ fromConfig(config: Ng1ViewDeclaration, params: any, context: ResolveContext) { @@ -49,12 +49,12 @@ export class TemplateFactory implements TemplateFactoryProvider { const asComponent = (result) => services.$q.when(result).then(str => ({ component: str })); return ( - isDefined(config.template) ? asTemplate(this.fromString(config.template, params)) : - isDefined(config.templateUrl) ? asTemplate(this.fromUrl(config.templateUrl, params)) : - isDefined(config.templateProvider) ? asTemplate(this.fromProvider(config.templateProvider, params, context)) : - isDefined(config.component) ? asComponent(config.component) : - isDefined(config.componentProvider) ? asComponent(this.fromComponentProvider(config.componentProvider, params, context)) : - asTemplate(defaultTemplate) + isDefined(config.template) ? asTemplate(this.fromString(config.template, params)) : + isDefined(config.templateUrl) ? asTemplate(this.fromUrl(config.templateUrl, params)) : + isDefined(config.templateProvider) ? asTemplate(this.fromProvider(config.templateProvider, params, context)) : + isDefined(config.component) ? asComponent(config.component) : + isDefined(config.componentProvider) ? asComponent(this.fromComponentProvider(config.componentProvider, params, context)) : + asTemplate(defaultTemplate) ); }; @@ -64,29 +64,31 @@ export class TemplateFactory implements TemplateFactoryProvider { * @param template html template as a string or function that returns an html template as a string. * @param params Parameters to pass to the template function. * - * @return {string|object} The template html as a string, or a promise for that + * @return {string|object} The template html as a string, or a promise for that * string. */ - fromString(template: (string|Function), params?: RawParams) { + fromString(template: (string | Function), params?: RawParams) { return isFunction(template) ? ( template)(params) : template; }; /** * Loads a template from the a URL via `$http` and `$templateCache`. * - * @param {string|Function} url url of the template to load, or a function + * @param {string|Function} url url of the template to load, or a function * that returns a url. * @param {Object} params Parameters to pass to the url function. - * @return {string|Promise.} The template html as a string, or a promise + * @return {string|Promise.} The template html as a string, or a promise * for that string. */ - fromUrl(url: (string|Function), params: any) { + fromUrl(url: (string | Function), params: any) { if (isFunction(url)) url = ( url)(params); if (url == null) return null; if (this._useHttp) { - return this.$http.get(url, { cache: this.$templateCache, headers: { Accept: 'text/html' }}) - .then(function(response) { return response.data; }); + return this.$http.get(url, { cache: this.$templateCache, headers: { Accept: 'text/html' } }) + .then(function (response) { + return response.data; + }); } return this.$templateRequest(url); @@ -97,7 +99,7 @@ export class TemplateFactory implements TemplateFactoryProvider { * * @param provider Function to invoke via `locals` * @param {Function} injectFn a function used to invoke the template provider - * @return {string|Promise.} The template html as a string, or a promise + * @return {string|Promise.} The template html as a string, or a promise * for that string. */ fromProvider(provider: IInjectable, params: any, context: ResolveContext) { @@ -140,21 +142,27 @@ export class TemplateFactory implements TemplateFactoryProvider { // Bind once prefix const prefix = angular.version.minor >= 3 ? "::" : ""; + // Convert to kebob name. Add x- prefix if the string starts with `x-` or `data-` + const kebob = (camelCase: string) => { + const kebobed = kebobString(camelCase); + return /^(x|data)-/.exec(kebobed) ? `x-${kebobed}` : kebobed; + }; + const attributeTpl = (input: BindingTuple) => { - let {name, type } = input; - let attrName = kebobString(name); + let { name, type } = input; + let attrName = kebob(name); // If the ui-view has an attribute which matches a binding on the routed component // then pass that attribute through to the routed component template. // Prefer ui-view wired mappings to resolve data, unless the resolve was explicitly bound using `bindings:` if (uiView.attr(attrName) && !bindings[name]) - return `x-${attrName}='${uiView.attr(attrName)}'`; + return `${attrName}='${uiView.attr(attrName)}'`; let resolveName = bindings[name] || name; // Pre-evaluate the expression for "@" bindings by enclosing in {{ }} // some-attr="{{ ::$resolve.someResolveName }}" if (type === '@') - return `x-${attrName}='{{${prefix}$resolve.${resolveName}}}'`; + return `${attrName}='{{${prefix}$resolve.${resolveName}}}'`; // Wire "&" callbacks to resolves that return a callback function // Get the result of the resolve (should be a function) and annotate it to get its arguments. @@ -165,18 +173,15 @@ export class TemplateFactory implements TemplateFactoryProvider { let args = fn && services.$injector.annotate(fn) || []; // account for array style injection, i.e., ['foo', function(foo) {}] let arrayIdxStr = isArray(fn) ? `[${fn.length - 1}]` : ''; - return `x-${attrName}='$resolve.${resolveName}${arrayIdxStr}(${args.join(",")})'`; + return `${attrName}='$resolve.${resolveName}${arrayIdxStr}(${args.join(",")})'`; } // some-attr="::$resolve.someResolveName" - return `x-${attrName}='${prefix}$resolve.${resolveName}'`; + return `${attrName}='${prefix}$resolve.${resolveName}'`; }; let attrs = getComponentBindings(component).map(attributeTpl).join(" "); - let kebobName = kebobString(component); - if (/^(x|data)-/.exec(kebobName)) { - kebobName = "x-" + kebobName; - } + let kebobName = kebob(component); return `<${kebobName} ${attrs}>`; }; }