CODEWITHSUNDEEP
angularjsdirective
Mikou
Mikou

Reputation: 651

evaluate expressions in directive attributes

Using AngularJS, I am looking for a way to evaluate expressions with "variables" in a directive's attribute.

For instance, in the textbox directive bellow, I want the property top to evaluate to the result of "10+index*25"

<template resource="api/data.json">
    <!-- usage of textbox component -->
    <textbox name="lblNames" text="name" top="10+index*25" left="11">
</template>

Index here should be the value of the iteration through ng-repeat in the textBox's Template (see bellow). (Another example : This and lblNames would refer to and return the component itself.)

<!-- template for textBox component -->
<div ng-repeat="row in rows" 
     style="left : {{components.left}}px; 
            top  : {{components.top }}px;">

  {{row[components.text]}}

</div>

The best way I have found so far is to use $parse which allows me to evaluate simple expressions such as "1+1" as seen in the code bellow. But how can I evaluate expressions with "dynamic properties" like : 10+index*25 ?

angular.module("uvis").directive("uvisTextbox", function($parse, $compile) {
    return { 
    scope : {
      test : '@'
    },
        restrict : 'E',
        require : '^uvisBundle',
        link : function( scope, element, attributes, uvisBundleCtrl) {
      console.log( element );
      uvisBundleCtrl.addComponent({
        text : attributes.text,
                top : $parse( attributes.top )(scope),
                left : $parse( attributes.left )(scope),
        debug : "empty"
          });
            console.log("linked uvisTextbox");
        },
    controller : function($scope) {
      $scope.test = 'test';
    }
    };
})

To make it easier to understand how the program works, I made JSFiddle here : https://jsfiddle.net/wxcx7ap3/7/

update (solution)

I manage to make it work by evaluating within the textBox template like so :

<!-- template for textBox component -->
<div ng-repeat="row in rows" 
     style="left : {{$eval( components.left) }}px; 
            top  : {{$eval( components.top) }}px;">

  {{row[components.text]}}

</div>

And of course I update 

top : $parse( attributes.top )(scope)

to

top : attributes.top

in the directive.

Full example : http://jsfiddle.net/wxcx7ap3/9/

Upvotes: 3

Views: 5572

Answers (2)

Manish
Manish

Reputation: 667

I evaluate express like this in angular template

 <td>{{ ( data.totalDurationOutgoing-0) + (data.totalDurationIncoming-0 ) }}</td>

Upvotes: 0

jcz
jcz

Reputation: 903

Use interpolation. Angular evaluates expressions within curly braces using the $interpolate service, trying to "resolve" all the variables within an expression using the context of the current scope.

So in your case:

<textbox name="lblNames" text="name" top="{{ 10+index*25 }}" left="11">

Angular will search for the index value on current scope and calculate the value. Moreover when Angular sees curly braces it places a watch on the expression and updates it, every time the value changes.

Upvotes: 4

Related Questions