current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
stack overflow careers
Sign up ×
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other. Join them, it only takes a minute:
up vote 1 down vote favorite

I have this scenario, I am loading part of HTML (which has AngularJS directives) dynamically via script and I see AngularJS is not getting activated.

here is the example I am looking at. Is there anyway I can tell AngularJS to start bind on document ready? Loading an aspx page containing this widget1 content via a iframe seems to work but I am trying to avoid iframe and use client side script. Appreciate any help.

<body ng-app>
main content page
<br />
<!-- widget1 -->
<b>Widget1</b>
<div id="widget1">
    <!-- load below div via jquery/or any method from a remote html file-->
    <script type="text/javascript">
        $("div#widget1").load("/widgetsfolder/widget1.htm");
    </script>
</div>

widget.htm file has below content.

   <div ng-controller="TodoCtrl">
        Total todo items: {{getTotalItems()}}
        <ul class="unstyled">
            <li ng-repeat="todo in todos">
                <input type="checkbox" ng-model="todo.done" />
                <span class="done-{{todo.done}}">{{todo.text}} </span></li>
        </ul>
    </div>

my controller code below.

`function TodoCtrl($scope) {
    $scope.totalItems = 4;
    debugger;
    $scope.todos = [{
        text: 'learn angularjs',
        done: false
    }, {
        text: 'implement angularjs',
        done: false
    }, {
        text: 'something else',
        done: false
    }, ];


$scope.getTotalItems = function () {
    return $scope.todos.length;
}

}`

sample code here http://jsfiddle.net/devs/RGfp4/

share|improve this question

3 Answers 3

up vote 2 down vote

Apero's answer describes what is going on. I believe you are going to want to use ng-include. Your html would look something like this:

<body ng-app>
    main content page
    <br />
    <!-- widget1 -->
    <b>Widget1</b>
    <div ng-include="'/widgetsfolder/widget1.htm'">
    </div>
</body>
share|improve this answer
up vote 0 down vote

AngularJS evaluates the scope and renders the page after it is loaded.

Here, your js script loads the widget html but after Angular already compiled the scope etc.

I believe this will not work this way.

share|improve this answer
up vote 0 down vote

You can use angulars ngINclude to fetch outside documents, but I don't suggest it, it can be buggy. You can get the partials using either $http or $resource, this will fetch the data and compile the angular directives inside.

If you want to load the script using some other method, you can store the data as a string inside the controller and use a $compile directive in order to execute the angular code inside it.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.