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
– Kalhan, Commented Jul 28, 2015 at 12:47
@K.Toress yes the div is in a partial view loaded with an ajax call — Vinay Pratap Singh Bhadauria
– Vinay Pratap Singh Bhadauria, Commented Jul 28, 2015 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
– Vinay Pratap Singh Bhadauria, Commented Jul 28, 2015 at 14:27
please add the code for ajax and append the content to html? — Kalhan
– Kalhan, Commented Jul 28, 2015 at 14:30

Community · Accepted Answer · 2017-05-23 12:24:31Z

1

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

edited May 23, 2017 at 12:24

CommunityBot

11 silver badge

answered Jul 28, 2015 at 13:01

Ben Cook

1,6842 gold badges18 silver badges33 bronze badges

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

1 Comment

Vinay Pratap Singh Bhadauria Over a year ago

i used this compile, but when using compile any controller is defined into the HTML getting complied, need to be defined first

Kalhan · Accepted Answer · 2015-07-29 09:40:30Z

1

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

edited Jul 29, 2015 at 9:40

answered Jul 29, 2015 at 4:28

Kalhan

21.9k8 gold badges71 silver badges96 bronze badges

4 Comments

Vinay Pratap Singh Bhadauria Over a year ago

i used this compile, but when using compile any controller is defined into the HTML getting complied, need to be defined first.

Kalhan Over a year ago

<div id="Some-div" data-ng-controller="SomeController"> </div> is this the content you load using ajax?

Vinay Pratap Singh Bhadauria Over a year ago

yes the loaded content is having a controller defined

Kalhan Over a year ago

ooh i think its better to use $routes then

Collectives™ on Stack Overflow

Getting Angular scope method for dynamically loaded element

But when the same div is loaded through an ajax call

Loading of the html

2 Answers 2

1 Comment

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

But when the same div is loaded through an ajax call

Loading of the html

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related