angularjs - How to get values resolved in template without double curly brackets -

i using directive , template. template follows

<div>     <a data-my-dir="item" data-attr1="true"         data-attr2="{{itemparentid}}"         data-attr3="{{item.id}}">     </a> </div> 

here due curly braces watches added , affecting performance. don't want watches not going modify attr2 or attr3. want directly resolved value here only.

we can use bindonce directive don't want watches can use bo-text="xyz" instead, here want pass values attr custom directive.

inside directive's link function binding click event element follows

link: function (scope, element, attrs) {     element.bind('click', function (event) {         var myattr1 = attrs.attr1;         var myattr2 = attrs.attr2;     } } 

so due watches in template on attr1 , attr2 getting these values resolved in click event.

what alternatives?

one time binding

seems use case one time binding (if using angular 1.3+)

<div>     <a data-my-dir="item"          data-attr1="true"         data-attr2="{{::itemparentid}}"         data-attr3="{{::item.id}}">     </a> </div> 

the directive like

angular.module('app', [])   .directive("mydir", function() {     return {       restrict: "a",       scope: {          "attr1": "@",          "attr2": "@",          "attr3": "@",       },       template: '<span> {{attr1}} {{attr2}} {{attr3}}</span>'     };   }) 

demo

http://plnkr.co/edit/gjczmb9ctknzzbcrhn7s?p=preview