passing data through Angular custom directive

Question

I created a custom directive in angular. I would like to pass parent data through the directive using scope but I'm getting 'undefined' when I log scope and scope.questionId.

HTML

<a class="waves-effect waves-light btn" my-directive="" on-flag="someFunction" question-id="question">Flag</a>

Angular Directive

angular.module('myApp').directive('myDirective', function($http) {
  return {
    restrict: 'A',
    scope: {
      onFlag: '&onFlag',
      questionId: '='
    },
    link: function(scope, element, attrs) {
      element.click(function() {
        console.log(scope);
        console.log(scope.questionId);
        return;
      });
    }
  };
});

i got onFlag() for logging attrs.onFlag and still undefined for attrs.questionId — jashuang1130
– jashuang1130, Commented Sep 27, 2016 at 18:57
why you returning element.click function, what you are trying to achieve by doing that? — Pankaj Parkar
– Pankaj Parkar, Commented Sep 27, 2016 at 19:00

Manoj Gupta · Accepted Answer · 2016-09-28 07:22:18Z

3

Try this

elem.bind:- It uses the JQLite which is lite version of JQuery. Here we are writing the code to handle the click event performed on the directive. It is same like JQuery $("class or id").click(). (I hope this explains is sufficient)

angular.module('myApp').directive('myDirective', function($http) {
  return {
    restrict: 'A',
    scope: {
      onFlag: '&onFlag',
      questionId: '='
    },
    link: function(scope, elem, attrs) {
     		elem.bind('click', function() {
        	console.log(scope.questionId);
      });
    }
  };
});

edited Sep 28, 2016 at 7:22

answered Sep 27, 2016 at 19:18

Manoj Gupta

813 bronze badges

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

Collectives™ on Stack Overflow

passing data through Angular custom directive

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