Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to access attributes within Angularjs's v1.5 component?

I am using the v1.5 component, which is essentially (as far as my understanding extends) a wrapper for best practice directives.

More info about the 1.5 release of component can be found here: http://toddmotto.com/exploring-the-angular-1-5-component-method/

I have the following:

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

And it's component definition:

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

Both A) and B) variations return undefined. C) renders correctly.

Is there a way to access attributes within the template function before returning the template string?

like image 930
Chris Avatar asked Dec 14 '15 09:12

Chris


People also ask

What is Oninit in AngularJS?

OnInitlinkA lifecycle hook that is called after Angular has initialized all data-bound properties of a directive.

What is @component in Angular?

Components are the most basic UI building block of an Angular app. An Angular app contains a tree of Angular components. Angular components are a subset of directives, always associated with a template. Unlike other directives, only one component can be instantiated for a given element in a template.

What is $Ctrl in AngularJS?

$ctrl is the view model object in your controller. This $ctrl is a name you choose (vm is another most common name), if you check your code you can see the definition as $ctrl = this; , so basically its the this keyword of the controller function.

How do I register a component in AngularJS?

Components can be registered using the . component() method of an AngularJS module (returned by angular. module() ).


1 Answers

In 1.5, templateUrl now takes injectables according to the docs: https://docs.angularjs.org/guide/component. If you use ng-srict-di you will get an error unless you specify the injectables....I'm using ng-annotate to save the headaches and keep the code clean. Here's an example (in 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
      }

  });

or without ng-annotate in vanilla JS:

  angular.module('app').component('book', {    
      templateUrl: ['$element', '$attrs', function($element, $attrs) {
           // access to the $element or $attrs injectables
      }],
  });
like image 196
Jeff Avatar answered Sep 29 '22 17:09

Jeff