Angular.js: How to reload scope?

Question

I have some markup and loaded controllers.

Then I load some modal window contents by ajax, which is using one of controllers I have defined before. But looks like this controller isn't being used, because he is not required until modal loaded.

Question: How to make controller work when modal loaded? I tryied $scope.$digest(), got error "digest in progress".

index.html

<html data-ng-app="foo">
<head>
<script src="/js/app.js"></script>
</head>
<body>
<div id="modal"></div>
</body>
</html>

js/app.js

!(function(){
    function FormCtrl($scope) {
        console.log($scope); // never fired

        $scope.Submit = function() {
            console.log('submit'); // never fired too :C
        }
    }

    angular.module('foo', []).controller('FormCtrl', FormCtrl);
})();

html content loaded by ajax and inserted to #modal

<div data-ng-controller="FormCtrl">
<form name="signup" data-ng-submit="Submit()">
<!-- form data -->
</form>
</div>

SOLUTION:

$.modal().open({
    onOpen: function($e) {
        $http.get('/views/' + url).success(function(data) {
            $compile(data)($scope, function(clonedElem) {
                $e.html(clonedElem);
            });

            // $e.html(data); was used instead of statement above
        });
    }
});

Can you tell what this modal window content is? Is the html for this modal window being retrieved by ajax? — Chandermani
– Chandermani, Commented Sep 6, 2013 at 10:55

Chandermani · Accepted Answer · 2013-09-06 11:12:56Z

1

If you want to inject new DOM elements into existing Anuglar app. You options are to use

ng-include: This has a src property that takes the url from which partial content has to be loaded. AngularJS would internally compile it. One important thing here is that angular will download the template as soon it encounter ng-include in html.
Download and compile DOM manually using the $compile service which is a more involved process.

If your AJAX content contains a controller defined in ng-controller, AngularJS would create it for you.

But in any case, keep in mind the controller script should have been already wired at the initialization\setup phase.

answered Sep 6, 2013 at 11:12

Chandermani

42.7k12 gold badges88 silver badges89 bronze badges

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

3 Comments

Miraage Over a year ago

Could you please explain? I need to call $compile($('#modal')) after loading html content?

Chandermani Over a year ago

Yes, and then add it some specific location with the DOM. Something like this stackoverflow.com/questions/11699635/…

Miraage Over a year ago

Thanks you a lot! I did things that I wanted.

Collectives™ on Stack Overflow

Angular.js: How to reload scope?

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related