javascript - Angular 1.5 component method templateUrl + function

ID : 274358

viewed : 26

Tags : javascriptangularjsjavascript





Top 4 Answer for javascript - Angular 1.5 component method templateUrl + function

vote vote

97

In 1.5.0-beta.2 templateUrl can be a function that is invoked by injector. $element and $attrs are injected into both template and templateUrl functions in component, as well as any other dependencies.

This means that

  ...   templateUrl: function ($element, $attrs) {     // access to $element and $attrs     ...     return $attrs.uninterpolatedTemplateUrl;   } 

can be done instead.

vote vote

83

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::mslogicmaster@gmail.com, 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() { }         }]     }); })(); 
vote vote

70

@estus solution worked for me until I uglified my scripts. Uglified it gave the following error:

Error: [$injector:unpr] Unknown provider: eProvider <- e 

The solution that worked for me is:

['$element', '$attrs', function($element, $attrs) {     return $attrs.uninterpolatedTemplateUrl; }] 
vote vote

65

Top 3 video Explaining javascript - Angular 1.5 component method templateUrl + function







Related QUESTION?