[AngularJS] after $compile the new html is run two times

[Damian Piecz]

Hi i was looking for answer all day... sory if it's a noob question i'm new in aJS. soo the problem is, i have simple controller

function SearchCtrl($scope, $http) {
  $scope.url = 'search';
  $scope.fetchContent = function() {       
      $http.post($scope.url).success(function(data, $compile) {
              console.log("SearchCtrl:post");
              $scope.test = data;
          }).error(function(data, status, headers, config) {
             
          }); 
  };
};

to get the data from post, then
then i have a directive to compile the data from backed

App.directive('angularHtmlBind', function( $compile) {
    return function(scope, elm, attrs) {
        function updateView(ret) {  
            elm.html($compile(ret)(scope));
        }        
        scope.$watch(attrs.angularHtmlBind, function(value) {
            updateView(value);
        });
    };    
}); 

i get a from post JSP page where i want to bid JSP variables to java script model

...
<div ng-controller="ModelCtrl">
            {{ setModelX(${searchCommand.nrOfElements}) }}   
            {{ getSize() }}
        </div>
...

it's working but it's calling this method two times ???
from fire Bug console :

ModelCtrl

index.js (line 44)

setModelX32

index.js (line 50)

getSize

index.js (line 46)

setModelX32

index.js (line 50)

log:

getSize

i really don't understand why??
thanks

[Johannes Hiemer]

Hi Damian,

might be the case that you got your controller mapped in your route-definition already?

Best regards,

Johannes

[Damian Piecz]

Hi Johannes
i don't thinks so, i don't define a routes in angular, because my routes are in spring
my controller look like this

App.controller('ModelCtrl', ['$scope', 'ListService', function($scope, ListService) {
    console.log("ModelCtrl");       
    $scope.getSize = function () {
        console.log("getSize");
        return ListService.size();
    };   
    $scope.setModelX = function(x) {       
        console.log("setModelX" + x);
    };
   
}]);

and it is run when the jsp page content is compile, to set up the variables

Best regards,
Damian

[Johannes Hiemer]

Hi Damian,

from this code snippet it is difficult to get a complete picture of your real problem. Could you create a plnkr here, then I will have a look.

http://plnkr.co/edit/gist:3172544?p=preview&s=Damian

Regards,

Johannes

[Damian Piecz]

hi Johannes 

i made a sample 

http://plnkr.co/edit/OISkbF

here when you see console log, and click Load form JSP, 

first it's 3 times call the methods, next it's 6 time...

setModel: 32

getSize

setModel: 32

getSize

setModel: 32

getSize

i think i don't clean something after get the data from response

D.

[Mateusz Bilski]

Hi Damian,

I've answered your question on stackoverflow http://stackoverflow.com/questions/13623673/angularjs-after-compile-the-call-new-function-in-html-is-run-many-times/13631054#13631054

Hope that helps!

[Mateusz Bilski]

Hi, did that help? I haven't seen any feedback from you neither on stack nor here.

cheers

[Damian Piecz]

Hi Mateusz, 

Thanks for the replay, the main problem was that the function is called twice... ( if it's correct behavior ) the rest was just made for 'quick' example.

the main pruporse to make this impl, is that i have a axjax call and get response in html (jsp.page) then i want to build with this a javascript model and use it in angular( that's why i want $compile functions like setModel() ), soo when in the future we change for JSON response, the change in angular code will be very small.

Do have any idea how make it better? 

cheers

D.