directivas - input angularjs

¿Cómo acceder a los atributos dentro del componente v1.5 de Angularjs?

Question

Estoy utilizando el componente v1.5, que es esencialmente (en mi opinión se extiende) un contenedor para las mejores prácticas directivas.

Puede encontrar más información sobre la versión 1.5 del componente aquí: http://toddmotto.com/exploring-the-angular-1-5-component-method/

Tengo lo siguiente:

<span>Correclty showing: {{ data.type }}</span>
<book class="details" type="data.type"></book>

Y es la definición de componente:

angular
.module(''app'')
.component(''book'', {
    bindings: {
        type: ''=''
    },
    template: function($element, $attrs) {
        // Have tried A):
        // console.log($attrs.type); // <- undefined

        // And B):
        $attrs.$observe(''type'', function(value) {
            console.log(value); // <- undefined
        });

        // But.. C):
        return "This works though {{ book.type }}"; // <- renders
    }
});

Las variaciones A) y B) undefined . C) representa correctamente.

¿Hay alguna manera de acceder a los atributos dentro de la función de plantilla antes de devolver la cadena de plantilla?

Answer 1

En 1.5, templateUrl ahora toma inyectables de acuerdo con los documentos: https://docs.angularjs.org/guide/component . Si usa ng-srict-di , obtendrá un error a menos que especifique los inyectables ... Estoy usando ng-annotate para guardar los dolores de cabeza y mantener limpio el código. Aquí hay un ejemplo (en TypeScript):

  import IRootElementService = angular.IRootElementService;
  import IAttributes = angular.IAttributes;

  angular.module(''app'').component(''book'', {

      /*@ngInject*/
      templateUrl($element:IRootElementService, $attrs:IAttributes) {
           // access to the $element or $attrs injectables
      }

  });

o sin ng-anotar en vainilla JS:

  angular.module(''app'').component(''book'', {    
      templateUrl: [''$element'', ''$attrs'', function($element, $attrs) {
           // access to the $element or $attrs injectables
      }],
  });