Using templates variables inside an angularJS script?

Question

I'm using Nunjucks to render a template overtime something hits the right URL. This is a piece of that template:

<h3>Select some text </h3>
<div ng-app="myApp">
  {% for i in result %}
<div id={{i._id}} class="task" commentId = {{i._id}} get-popover-content> {{i.text}} </div> <br/>
{% endfor %}

I've also put an angular JS script in this template and for now, I'm just trying to figure out what's the best way to pass the variable {{i._id}} to be used inside the directive (potentially, I'd like to send this i._id to my DB to get information.

<script>
var app = angular.module("myApp", []);
app.directive("getPopoverContent", function($http) {
   return {
     link: function(scope, element, attr) {
      element.popover();
      $(element).on('mouseover', function(e){
      console.log('i._id = ',{{i._id}});
    })
  })

} }});

1. Is this even the right approach of using template engine + angularJS?
2. Is there a way to do that?

Answer 1

There are 2 ways of doing this, either you can you can bind it to the directive scope.

var app = angular.module("myApp", []);
app.directive('getPopoverContent', function() {

  function link(scope, element, attrs) {
    console.log(scope.commentId);
  }

  return {
    link: link,
    restrict: 'A',
    scope: {
      commentId: '=commentId'
    }
  };
});

Or you can just use the attrs parameter to get it out of any attribute

    var app = angular.module("myApp", []);
    app.directive('getPopoverContent', function() {

      function link(scope, element, attrs) {
        console.log(attrs.commentId);
      }

      return {
        link: link,
        }
      };
    });