角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にアクセスできる関数を返すテンプレートのアイデアは気に入っていますが、これをtemplateUrlとどのように組み合わせるのですか？

Answer 1

1.5.0-beta2 templateUrlは、インジェクタによって呼び出される関数とすることができます。 $elementと$attrsare injectedとboth template and templateUrl functionsとcomponentとの間の他の依存性も含む。

これは

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

が代わりに行うことができることを意味します。

Answer 2

@estus解決策が私のスクリプトを偽装するまで私のために働いた。私のために働いたソリューションです

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

：Uglifiedそれは次のようなエラーを与えた

['$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() { } 
     }] 
    }); 
})();