AngularJs: Directive is not getting attribute value

Question

I have a directive highlight with a data-highlight attribute that I want to use inside the directive, but I can´t get it inside the directive.

HTML:

<li ng-repeat="car in cars" data-highlight="{{car.id}}">

Directive:

app.directive('highlight', function() {         

    function link(scope, element, attrs) { 

        console.log("highLight directive initialized");
        console.log("id=" + attrs.highlight);
        var id = 1;
      var iw = angular.element(document.querySelector('#iw-' + id));
      console.log("iw=" + iw);
    }

    return {

        link: link,
        controller: function($scope, $element) {
         console.log("highLight directive CONTROLLER initialized");
       }
    };
})

Please see this plunker: https://plnkr.co/edit/dP2cvut4f5ao5pFe6ka0?p=preview

Note: AngularJs version is 1.0.7

AngularJs version is 1.0.7: why? The current version is 1.6.7. There have been dozens of releases since 1.0.7, fixing loads of bugs and bringing many features and improvements. Don't use such an obsolete version. — JB Nizet
– JB Nizet, Commented Jan 15, 2018 at 22:31
Please don't use data-* for directives, will throw an error if declared property in attribute doesn't exist, be creative name whatever you like using camel case in dir like myAtrributeCustom then in html my-attribute-custom="{{car.id}}" — Zeal Murapa
– Zeal Murapa, Commented Jan 15, 2018 at 22:58

RaphaMex · Accepted Answer · 2018-01-15 23:08:13Z

Use directive's scope to get attribute values, bind them, and make everything more explicit:

HTML:

<li ng-repeat="car in cars" highlight="car.id">

Directive:

app.directive('highlight', function() {         

    return {
        restrict: 'A',
        scope: {
            highlight:'=',
            cars:'='
        },
        link: function ($scope, $element) { 
            console.log("highLight directive initialized");
            console.log("id=" + $scope.highlight);
            var id = 1;
            var iw = angular.element(document.querySelector('#iw-' + id));
            console.log("iw=" + iw);
        }
    };
})

Vikash Kumar · Accepted Answer · 2018-01-16 05:41:27Z

Change your return and use scope

 return {
scope: {
  highlight: '=datahighlight'
},
    link: link,
    controller: function($scope, $element) {
     console.log("highLight directive CONTROLLER initialized");
   }

and change your link function

 function link(scope, element, attrs) { 

    console.log("highLight directive initialized");
    console.log("id=" + scope.highlight);
    var id = 1;
  var iw = angular.element(document.querySelector('#iw-' + id));
  console.log("iw=" + iw);
}

Slava Utesinov · Accepted Answer · 2018-01-16 06:44:30Z

At this case you should pass car.id without curly braces, and get it via scope.$eval(attrs.highlight):

angular.module('app', []).controller('ctrl', function($scope) {
  $scope.cars = [
    { id: 1, price: 100, latitude: 39.65, longitude: 3.0175 },
    { id: 2, price: 200, latitude: 39.67, longitude: 3.0173 }
  ];      
}).directive('highlight', function() {
  function link(scope, element, attrs) {
    console.log("highLight directive initialized");
    var id = scope.$eval(attrs.highlight);
    console.log("id=" + id);
    var iw = angular.element(document.querySelector('#iw-' + id));
    console.log("iw=" + iw);
  }

  return {
    link: link,
    controller: function($scope, $element) {
      console.log("highLight directive CONTROLLER initialized");
    }
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">
</script>

<ul ng-app='app' ng-controller='ctrl'>
  <li ng-repeat="car in cars" data-highlight="car.id">
    {{car.id}}: {{car.price}} (please, highlight the infoWindow in map onmouseover)
  </li>
</ul>

Collectives™ on Stack Overflow

AngularJs: Directive is not getting attribute value

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related