Angularjs - Pass optional parameter for Directive from HTML

Question

I am trying to pass an optional parameter isvalid from my html to the directive. I have followed all the steps mentioned in documentation but it still looks like i am doing something wrong.. i am not able to read the value in my directive. can you let me know what am i doing wrong?

HTML

 <customvideo isvalid="true"></div>

MY Directive
Update: I had simplified for questioning purpose and hence you were seeing $scope. I have updated the actual directive now

    // Set the directive
    angular
        .module('custom.directives')
        .directive('customvideo', customvideoDirective);

    // Set the directive $injections
    customvideoDirective.$inject = ['$Scope'];


 function customvideoDirective($Scope)  
{
            return {
                compile: compile,
                restrict: 'A',
                $Scope: {
                    isvalid: '=?'
                }
            };

  function compile() {
      console.log($Scope.isvalid);  //this is undefined 
     }
  }

})();

thankyou @PankajParkar. i inject it as $scope. i removed it here for simplicity... it is something like this : // Set the directive angular .module('custom.directives') .directive('customvideo', customvideoDirective); // Set the directive $injections customvideoDirective.$inject = [ '$Scope' ]; — Night Monger
– Night Monger, Commented Sep 28, 2017 at 18:33

Pankaj Parkar · Accepted Answer · 2017-09-29 11:04:41Z

1

Change you $Scope property inside Directive Definition Object (DDO) should be changed scope. Also use link function instead of using compile, as compile function has access to only raw DOM, there will be no scope available in it. Even you can return and PreLink/PostLink from compile function, but in this case I believe using link would be appropriate.

angular.module('directives')
.directive('customvideo', function () {
    return {
       link: link,
       restrict: 'A',
       scope: {
          isvalid: '=?'
       }
    }
);

function link(scope) {
   console.log(scope.isvalid);
}

edited Sep 29, 2017 at 11:04

answered Sep 28, 2017 at 18:32

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

Comments

Night Monger · Accepted Answer · 2017-09-29 02:23:46Z

0

Found a way to work it out.. not sure if it is the best.. but hey.. it works :) Posting it here for those who come here for answers... I was writing the syntax for compile wrongly... I changed it to

 function  compile(tElement, tAttrs, transclude)
  {
    // the tAttrs param has all the attributes associated with the element
    console.log(tAttrs.isvalid);
  }

answered Sep 29, 2017 at 2:23

Night Monger

7802 gold badges12 silver badges35 bronze badges

2 Comments

Pankaj Parkar Over a year ago

This is not correct way of doing it. Compile function is not correct place to look for value passed to directive. please follow above answer..

Night Monger Over a year ago

Thanks Pankaj.. Would would mind explaining why not compile vs link in my scenario.. i dont want to modify my dom or anything.. i just want to read the value .. I thought Link should be used when I actually want to modify the Dom. Would that be a wrong assumption?

Collectives™ on Stack Overflow

Angularjs - Pass optional parameter for Directive from HTML

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related