AngularJS: Get attribute value from custom tags

Question

i am a newbie of AngularJS don't know what i am doing wrong here is my code. Basically i am trying to get attribute value of post-id from my index.html and print it in console from my controller.

In my index.html:

<post-creator post-id="5" category="1"></post-creator>
<script src="components/post-creator/post-creator.component.js"></script>

post-creator.component.js:

function controller($http) {
        var model = this;

        model.$onInit = function () {
            console.log("id again:" + model.postId);
        }
module.component("postCreator", {
        templateUrl: "components/post-creator/post-creator.template.html",
        bindings: {
            value: "<"
        },
        controllerAs: "model",
        controller: ["$http", controller]
    });

shouldn't your bindings contain postId instead of value? — tanmay
– tanmay, Commented May 9, 2017 at 6:22

tanmay · Accepted Answer · 2017-05-09 06:38:39Z

1

Since in the HTML, you are passing post-id="..." category="...", they should be part of bindings of your component and not value. Like this:

bindings: {
    postId: "<",
    category: "<"
}

Here's a sample working example:

var module = angular.module("myApp", [])

function controller($http) {
  var model = this;

  model.$onInit = function() {
    console.log("id again:" + model.postId);
  }
}

module.component("postCreator", {
  template: "<div>post creator</div>",
  bindings: {
    postId: "<",
    category: "<"
  },
  controllerAs: "model",
  controller: ["$http", controller]
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<div ng-app="myApp">
  <post-creator post-id="5" category="1"></post-creator>
</div>

edited May 9, 2017 at 6:38

answered May 9, 2017 at 6:33

tanmay

7,9112 gold badges24 silver badges39 bronze badges

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

Collectives™ on Stack Overflow

AngularJS: Get attribute value from custom tags

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related