Estoy tratando de conseguir una aplicación de trabajo con angular 1.5.0-beta.2

Hacer una ‘directiva’ tengo el siguiente código:

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

Me gusta la idea de la plantilla que devuelve una función con acceso a $element y $attrs pero, ¿cómo puedo combinar esto con una templateUrl?

  • No combinan, se utilice uno u otro.
  • No me sorprende, pero un poco decepcionado. Gracias dfsq.
  • por qué me decepcionó. Lo que quieres hacer con una plantilla y una plantilla de url exactamente ? Que como preguntar por una escalera en el interior de un ascensor… son exclusivos…
  • Ehrm … nunca lo había pensado de esa manera (buena analogía), pensé que sería bueno tener la oportunidad de tener una plantilla en un archivo separado y se mezclan con los atributos y elemento también …
InformationsquelleAutor tuvokki | 2015-11-21

3 Comentarios

  1. 23

    En 1.5.0-beta.2 templateUrl puede ser una función que se invoca mediante un inyector. $element y $attrs se inyectan en ambos plantilla y templateUrl funciones en component, así como cualquier otra dependencia.

    Esto significa que

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

    se puede hacer en su lugar.

    • Y qué hace este trabajo con una externa de la plantilla? El templateUrl normalmente contiene una referencia a la plantilla.
    • Eso es correcto. Así que la decisión puede ser tomada en plantilla de url, por ejemplo, por los atributos de los elementos. Lo que se planea usar? Si usted espera obtener de la plantilla de respuesta en templateUrl función, no, usted todavía tiene que procesar una plantilla de más adelante en la directiva (no tenemos función de enlace en el componente, pero no es el controlador).
    • Entiendo, estus, y yo no tenía ningún objetivo real aquí. Sólo me preguntaba.
    • ¿Cómo puedo pasar el enlace de los elementos en un templateUrl donde templateUrl es una ruta de acceso a un archivo html externo?
    • No estoy seguro de lo que quieres decir. Por favor, cree una pregunta que podría explicar su caso.
    • href=»http://stackoverflow.com/questions/38645945/pass-bindings-to-templateurl-in-angulars-component» title=»pass enlaces a templateurl en angulars componente»>stackoverflow.com/questions/38645945/…
    • Esto funciona para la estática templateUrl. Dinámica de interpolación no funciona en absoluto. Puedo tener una solución a esto?
    • No. Los componentes no deben hacer eso. Uso de la solución existente para la dinámica de las directivas’, hay un montón de ellos, el más obvio y simple, uno es ng-include.

  2. 7

    @estus solución funcionó para mí hasta que yo uglified mis scripts. Uglified dio el siguiente error:

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

    La solución que funcionó para mí es:

    ['$element', '$attrs', function($element, $attrs) {
        return $attrs.uninterpolatedTemplateUrl;
    }]
    • Todos funciones Angular que el uso de DI debe ser anotado en el fin de ser correctamente record. I. e. casi todas las funciones Angular de la API, con la excepción de las funciones directivas (link, template, etc). Esto a menudo se omite en los ejemplos, porque esta es la acción predeterminada.
  3. 6

    He resuelto este problema mediante la siguiente técnica. Esto puede ayudar a usted.

    Plantilla

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

    Un componente

    /**
     * @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() { }
            }]
        });
    })();
    • Compañero, esa solución es excelente! He resuelto por las distintas rutas, con el valor configurable codificado en el código HTML (como el ámbito de aplicación no está disponible para el enlace). Su solución es mucho más agradable. Ojalá pudiera votar hasta este más!
    • encantado de ayudarle.

Dejar respuesta

Please enter your comment!
Please enter your name here