AngularJS 1.5, attributes in component isn t recovered

Question

I know this post Angular 1.5 component attribute presence should answer my question but I did everything like they did and I still can t recovered my data! If you have any idea why.. :)

Component:

component('ficheOperation', {
    templateUrl : 'operations/creerOperation.template.html',
    bindings : {
      idOp : '<'
    },
    controller : ['$scope', '$routeParams', '$location',
      function ficheOperationController($scope, $routeParams, $location){
        var self = this;
        console.log(self.idOp);
    }]
})

HTML :

<fiche-operation idOp="33"></fiche-operation>

the template is rightfully loaded but in my console all I get is a horrific "undefined".

Thx

have you tried console.log(self)? could show something useful.. — Kaddath
– Kaddath, Commented Aug 24, 2017 at 17:20
It show the object containing idOp but as undefined, really weird, if I find what is wrong I will update this — artless boy
– artless boy, Commented Aug 24, 2017 at 17:30
I don't think naming the function makes sense here. ficheOperationController could be causing your issue. It should be just function($scope, $routeParams, $location) — Nathan
– Nathan, Commented Aug 24, 2017 at 18:14
I tried after removing "ficheOperationController", it just work the same, fine but without retrieving the attribute but Thx :) — artless boy
– artless boy, Commented Aug 24, 2017 at 18:38

lenilsondc · Accepted Answer · 2017-08-25 11:23:42Z

2

First problem I encountered in your code was the binding name you used in the template, you have to use it as id-op="33" instead of idOp="33".

<fiche-operation id-op="33"></fiche-operation>

Also, you won't be able to see the binding property before the component has gotten fully initialized. Therefore, you have to make use of the $onInit life cycle hook.

this.$onInit = function() {
    console.log(self.idOp);
};

I made a small app with a component based on your code which fix the errors I found in it.

angular
  .module('myApp', [])
  .component('ficheOperation', {
    template: '{{ $ctrl.idOp }}',
    bindings: {
      idOp: '<'
    },
    controller: ['$scope', '$location',
      function ficheOperationController($scope, $location) {
        var self = this;

        self.$onInit = function() {
          console.log(self.idOp);
        };
      }
    ]
  });

<div ng-app="myApp">
  <fiche-operation id-op="33"></fiche-operation>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.js"></script>

Refs

Understanding Components

Creating Custom Directives

edited Aug 25, 2017 at 11:23

answered Aug 24, 2017 at 19:32

lenilsondc

9,8453 gold badges27 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

artless boy Over a year ago

Ahah thx a lot, shame on me for idOp but didn't t know this self.$onInit! I would have up voted it but I don t have enough point ^^

Kaddath Over a year ago

voted for you @artlessboy, glad to know this so i can avoid it when i face it ;)

Collectives™ on Stack Overflow

AngularJS 1.5, attributes in component isn t recovered

1 Answer 1

Refs

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Refs

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related