CODEWITHSUNDEEP
angularjsangularjs-directive
subha
subha

Reputation: 424

template of custom angular directive repeats every time a scope variable of directive is changed

I have an array binded to an attribute of a custom directive. This attribute value is used in my template part. The template run everytime the array gets changed right?. This template creates a div element. Every time the array gets changed the template creates the div element without deleting previous one. Is there a way to delete the previous before re-creating?

app.directive("imgslidedynamic",function()  
{     
    return{
            restrict:'EA',
            scope:{
                    imgsc: "=imgsc" ,
                 },

            template:   '<div class="rslides">'+
                          '<div ng-repeat="everyimg in imgsc">'+
                            '<img ng-src="{{everyimg}}"/>'+
                          '</div>'+
                        '</div>'
            ,       

            link:   function(scope,element,attrs)
                    {
                        scope.$watchCollection('imgsc',function(){  
                                    console.log("imgsc changed!");
                        });                         
                    } 
        };
    });

The directive call

 <imgslidedynamic imgsc="selection"></imgslidedynamic>

Here "selection" is an array that is dynamic.

Upvotes: 1

Views: 74

Answers (3)

Manishz90
Manishz90

Reputation: 2614

Change your $watchCollectioncallback to show the imgsc so as to verify if the images are getting pushed to array or the array is getting reset, so the code could be

 scope.$watchCollection('imgsc',function(imgsc){  
       console.log(imgsc + "imgsc changed!");
 });

Upvotes: 0

digit
digit

Reputation: 4565

You have created an isolated scope by doing this. 

scope:{
   imgsc: "=imgsc" ,
 },

Everytimes an array is changed, the new value is assigned to the imgsc scope. Remove this line. Just use parent scope that is selection array

app.directive("imgslidedynamic",function()  
{     
    return{
            restrict:'EA',
            template:   '<div class="rslides">'+
                          '<div ng-repeat="everyimg in selection">'+
                            '<img ng-src="{{everyimg}}"/>'+
                          '</div>'+
                        '</div>'
            ,       

            link:   function(scope,element,attrs)
                    {
                        scope.$watchCollection('imgsc',function(){  
                                    console.log("imgsc changed!");
                        });                         
                    } 
        };
    });

Working Fiddle : JsFiddle

UPDATE

If you insist, just refresh the directive itself.

I just refer StackOverflow, it says ui-if was removed at least from latest version angular-ui but since angular 1.1.5 you have ng-if build-in.

Then you can use ng-if.

View

<imgslidedynamic ng-if="selectionChange" imgsc="selection"></imgslidedynamic>

Ctrl

var app = angular.module('app', []);

app.controller("Ctrl", function ($scope) {
     $scope.selectionChange = false;
     $scope.selection = [ 'a', 'b', 'c', 'd', 'e'];

     $scope.changeSelection = function () {
      $scope.selection = [ 'c', 'd', 'e'];
     }

     $scope.$watchCollection('selection', function (newVal, oldVal) {
        // console.log(newVal + ' | ' + oldVal);
         if (newVal !== oldVal) {
            console.log('Enter');
            $scope.selectionChange = true;
         } else {
             $scope.selectionChange = false;
         }
     });
});

This way if selection changes or is set it to null briefly then reapply . That will remove and then transclude html directive back into the DOM causing it to eval the directive again.

Upvotes: 0

Manishz90
Manishz90

Reputation: 2614

You are using isolated scope and it is on of the best practices, I think the selection array you are using is not getting recreated correctly, here is working plunker where I am changing the selectionarray and it is working as expected.

https://plnkr.co/edit/HpLkA2kREKbhqH1RJQet?p=preview

Upvotes: 0

Related Questions