कोणीय 1.5 घटक विधि templateUrl + समारोह

Question

मैं कोणीय 1.5.0-beta.2 के साथ काम करने के लिए एक एप्लिकेशन पाने के लिए

एक 'निर्देश' मैं निम्नलिखित कोड है बनाने के लिए कोशिश कर रहा हूँ:

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('') 
    } 
}); 

मुझे टेम्पलेट का विचार पसंद है जो $element और $attrs तक पहुंच के साथ फ़ंक्शन देता है लेकिन मैं इसे टेम्पलेट यूआरएल के साथ कैसे जोड़ूं?

Answer 1

1.5.0-बीटा 2 templateUrl इंजेक्टर द्वारा बुलाया जाने वाला एक कार्य हो सकता है। $element और $attrsare injectedboth template and templateUrl functions में component, साथ ही साथ किसी भी अन्य निर्भरताओं में।

इसका मतलब है कि

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

बजाय किया जा सकता है।

Answer 2

@estus समाधान मेरे लिए तब तक काम करता था जब तक कि मैंने अपनी स्क्रिप्ट को गुमराह नहीं किया। Uglified यह निम्न त्रुटि दिया:

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

समाधान है कि मेरे लिए काम किया है:

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

Answer 3

मैं तकनीक का पालन करते हुए इस समस्या का समाधान। यह आपकी मदद कर सकता है।

खाका

<div data-ng-repeat="field in $ctrl.fields track by $index"> 
    <render-field data-field-type="{{field.type}}"></render-field> 
</div> 

एक घटक

/** 
* @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() { } 
     }] 
    }); 
})();