Getting Angular scope method for dynamically loaded element

Question

<div id="Some-div" data-ng-controller="SomeController">
</div>

angularModule.controller("SomeController", ["$scope", "$http", function ($scope, $http) {
    $scope.someFunction = function myfunction() {

    }    
}]);

When we usegetAngularControllerScope($('#Some-div')); to get the scope the method someFunction() is accessible and can be called like this getAngularControllerScope($('#Some-div')).someFunction()

But when the same div is loaded through an ajax call

getAngularControllerScope($('#Some-div')); has no methods available. Please help.

Loading of the html

$http.post('/SomeController/MyPartialAction', { data: "value" }).success(function (response) {
//load the partial view HTML in the div
$("#MyDiv").html(response);        
});

how you load it using ajax? get the html as string and put it in the html? — Kalhan.Toress, Jul 28 '15 at 12:47
@K.Toress yes the div is in a partial view loaded with an ajax call — Vinay Pratap Singh Bhadauria, Jul 28 '15 at 12:51
@k.toress I am doing this in an mvc project. And the partial view content is loaded though ajax in a div. — Vinay Pratap Singh Bhadauria, Jul 28 '15 at 14:27
please add the code for ajax and append the content to html? — Kalhan.Toress, Jul 28 '15 at 14:30

score 1 · Answer 1 · edited May 23 '17 at 12:24

Angular won't compile html content that you put directly into the DOM. In order to get it to process directives, such as ng-controller, you need to compile it explicitly. Something like this should work:

newScope = $scope.$new();     // for a new child scope
newScope = $scope.$new(true); // for a new isolate scope
newScope = $scope;            // for an existing scope

$compile(insertedDomElement)(newScope);

Or you could use ng-include:

$scope.template = '<div id="Some-div" data-ng-controller="SomeController</div>';

<html><body>
  <ng-include src="template"></ng-include>
</body></html>

Cf. AngularJS How to dynamically add HTML and bind to controller

i used this compile, but when using compile any controller is defined into the HTML getting complied, need to be defined first — Vinay Pratap Singh Bhadauria, Jul 29 '15 at 07:14

Kalhan.Toress · Answer 2 · 2015-07-29T09:40:30.997

you need to compile the element in order to attach it in to the current scope,

to do that, inject the $compile service in to the controller,

Compiles an HTML string or DOM into a template and produces a template function, which can then be used to link scope and the template together

angularModule.controller("SomeController", ["$scope", "$http", "$compile", function  ($scope, $http, $compile) {
    $scope.someFunction = function myfunction() {

    }    
}]);

compile and attach the html after the ajax, like,

$http.post('/SomeController/MyPartialAction', {data:"value"}).success(function(response) {
    //compile against the $scope here,
    var compiledElm = $compile(response)($scope);
    $("#MyDiv").html(compiledElm);        
});

UPDATE

If you really cant use the $routes to achieve this, then you can do like this, but the best possible way is using $routes.

wrap the #MyDiv with in a div and assign a controller to that div like, i have put ParentCtrl

<div ng-controller="ParentCtrl">
    <button ng-click="getHtml()">attach html</button>
    <div id="MyDiv"></div>
</div>

and in ParentCtrl do the html content attachment. as below

app.controller('ParentCtrl', function($scope, $timeout, $compile) {
    $scope.getHtml = function() {
        $timeout(function() {
            var html = '<div id="Some-div" data-ng-controller="SomeController">{{ name }}</div>';
            var compiled = $compile(html)($scope);
            $("#MyDiv").html(compiled);
        }, 1000);
     };
}

here is a DEMO

i used this compile, but when using compile any controller is defined into the HTML getting complied, need to be defined first. — Vinay Pratap Singh Bhadauria, Jul 29 '15 at 07:13

Getting Angular scope method for dynamically loaded element

But when the same div is loaded through an ajax call

Loading of the html

2 Answers2