angularjs nested directive with changing attribute

Question

The directive simply hangs the entire site .. because of the nested directive call .. resolve this issue,, i a, abl

Here is my use case ..

Directive definition is given by:

app.directive('bluet', function($rootScope,$compile) {
    return {
        scope: {}, 
        restrict: 'E',
        replace: true,
        controller: function($scope, $element, $attrs, $parse, $timeout,$transclude) {
            $scope.val1;
        },      
        templateUrl:"partials/bluetTemplate.html",

        link: function(scope, element, attrs) {
            attrs.$observe('val1', function(value) { 
                if(value && value != undefined) {
                    scope.val1 =  value;
                }
            });
        }

}

and the calling html looks like ...

 <bluet val1="{{ val1 +'1' }}"></bluet>

the ng-template for partials/bluetTemplate.html would look something like :

<div>
  <span ng-if="val1=='111'">
    <bluet val1="{{ val1 +'1' }}" ><bluet>           
    <!-- nested call -->
  </span>
  <span>
    {{val1}}
  </span>    
</div>

Since you know the cause of the problem (nested directive), why don't you solve it yourself ? How are e supposed to know in what articular way you want to handle it (and why you created an infinite directive loop in the first place) ? — gkalpak
– gkalpak, Commented Apr 4, 2014 at 9:50
Its not a "infinite directive loop" its recursive loop with a end condition. I have custom tree which i want to parse. NOTE that i want to pass params to the tree with 'val1' attribute in the DOM. — shrw
– shrw, Commented Apr 4, 2014 at 14:22
I don't know where you think there is an end condition, but there isn't. The directive will compile forever (as you have already experienced anyway). Maybe stating what you are trying to achieve might help someone propose a better approach (i.e. one that does not cause the browser to crash). — gkalpak
– gkalpak, Commented Apr 4, 2014 at 19:06
<span ng-if="val1=='111'"> is the condition when it will call itself ... else it will stop ,, the resursive condition is complex in my case,, but i have simplified here — shrw
– shrw, Commented Apr 5, 2014 at 7:22
This condition will be evaluated during the link-phase. But before that comes the compile-phase that will first try to compile the template and will result in an infinite compiling loop. — gkalpak
– gkalpak, Commented Apr 5, 2014 at 7:56

gkalpak · Accepted Answer · 2014-04-05 13:44:23Z

3

Since the ngIf directive will check the "end condition" during the post-link phase, while the template will be compiled during the compile phase, ther will be an ininite compile loop.

A possible approach would be to check the "end condition" (i.e. the value of val1) in post-link phase and (if necessary) create, compile and insert a new <bluet> child element dynamicaly.

E.g.:

app.directive('bluet', function($compile) {
    return {
        restrict: 'E',
        replace: true,
        scope: {},
        template: '<div><span>{{val1}}</span></div>',
        link: function postLink(scope, elem, attrs) {
            scope.val1 = attrs.val1;
            if ((scope.val1 !== undefined) && (scope.val1 !== '111')) {
                var bluet = angular.element(
                    '<bluet val1="' + scope.val1 + '1"></bluet>');
                $compile(bluet)(scope);
                elem[0].insertBefore(bluet[0], elem[0].firstChild);
            }
        }
    };
});

See, also, this short demo.

answered Apr 5, 2014 at 13:44

gkalpak

48.2k8 gold badges108 silver badges120 bronze badges

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

4 Comments

gkalpak Over a year ago

Always glad to help ! Feel free to also upvote the answer if you really liked :)

shrw Over a year ago

Don't have enough pts at this moment .. but will definately do that .. once i have it ..

gkalpak Over a year ago

I believe 15 pts are enough for an upvote (and you seem to have 43) :)

shrw Over a year ago

ah.. didn't knew abt this.. really

Collectives™ on Stack Overflow

angularjs nested directive with changing attribute

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related