How to load a ng-controller through ajax and inject it into the DOM

Navigation
1

I'm creating an application where I'd like to load my modules via ajax. This application uses AngularJS to handle each module and these are injected into my DOM using Jquery, as in the example below:

EDIT - (as requested by @EduardoBinoto) 

<html>
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.0/angular.min.js"></script><scriptsrc="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    </head>
    <body ng-app="app">

        <section name="foo" ng-controller="fooCtrl">
            <button ng-click="bar()">my name is foo</button>
        </section>

        <script>
          angular.module('app',[])
            .controller('fooCtrl', ['$scope','$http', '$compile', function($scope, $http, $compile) {
                $scope.bar = function(){
                    //simulação de requisição $http que retornou um módulo
                    var ajaxResponse = 
                        '<section name="bar" ng-controller="barCtrl">'+
                            '<button ng-click="helloWorld()">hello world</button>'+
                        '</section>';
                    //inserção do conteúdo no body através do jQuery
                    $('body').append(ajaxResponse);
                    //compilação do novo controller
                    $compile($('body'),$scope);
              };
            }])
            .controller('barCtrl', ['$scope', function($scope) {
                $scope.helloWorld = function(){ alert('Hello World!!!'); };
            }])
        ;
        </script>
    </body>
</html>

I need to know how I can make angular see this new module after inserting through jquery.

NOTE: I searched for various content on the internet and everyone says I need to run $scope.$apply or $scope.$digest but I could not understand in any of the examples I found how to actually use this in this situation.

    
asked by anonymous 24.12.2015 / 11:37

3 answers

1
  • You need to compile% dynamic% before adding it to the DOM by JQuery
  • At compile time you need to specify the scope in which the supplied HTML will be compiled because $ compile returns a function that expects the context

    • In this way the solution to the problem is as follows: 

    var ajaxResponse = '<section name="bar" ng-controller="barCtrl">'+
                        '<button ng-click="helloWorld()">hello world</button>'+
                    '</section>';

//COMPILE ANTES DE COLOCAR NO DOM Fornecendo o escopo                  
var compiled = $compile(ajaxResponse)($scope);

$('body').append(compiled);

    Follow the plunker: HERE

        
    31.12.2015 / 01:17
    3

    Good morning, to work what you're trying to do, you should use% w / o of the angle.

    Example: 

    var mainMod = angular.module('MainApp', []);
mainMod.controller('MainCtrl', ['$scope','$compile',


 var ajaxResponse =  '<section name="bar" ng-controller="barCtrl">'+
                        '<button ng-click="helloWorld()">hello world</button>'+
                     '</section>';

 //inserção do conteúdo no body através do jQuery
 $('body').append(ajaxResponse);

 //$compile
 $scope.compile = $compile(ajaxResponse)($scope);


    }
]);

    I hope I have helped.

        
    24.12.2015 / 11:57
    1

    If you only use $ (). append () you are only adding the string in html and not updating the DOM.

    There is a directive that does all this work for us developers. 

    app.directive('dynamic', ['$compile', function($compile){
return{
  replace: true,
  link: function($scope, ele, attrs) {
      $scope.$watch(attrs.dynamic, function(html){
         if(!html)
            return;
         ele.html((type of(html) === 'string') ? html : html.data);
         $compile(ele.contents())($scope);
});
}
}
}]);

    After adding the policy to call you just put it. 

    <div data-dynamic="htmlDynamic" ></div>

    In your controller you just need to implement 

    $scope.htmlDynamic = "HTML AQUI";
        
    24.12.2015 / 14:56
    Run function in PHP to insert data into DB daily at specific time How do I put my list in alphabetical order?