angular scripts not working while ajax callback

Question

I've a page, where I've defined all the angular coding for accordion. Now, I'm loading that page content using ajax.

My angular page content

angular.module('plunker', ['ui.bootstrap']);

function AccordionDemoCtrl($scope) {

    $scope.groups = [{
        DivisionId: 1,
        Division: '.Net',
        items: [{
            'Id': 1,
                'Name': 'Manikishore',
                'Division': '.Net'
        }, {
            'Id': 2,
                'Name': 'Santosh',
                'Division': '.Net'
        }, {
            'Id': 2,
                'Name': 'Prakash',
                'Division': '.Net'
        }]
    }, {
        DivisionId: 2,
        Division: 'Design',
        items: [{
            'Id': 19,
                'Name': 'Mahesh',
                'Division': 'Design'
        }, {
            'Id': 20,
                'Name': 'Hareen',
                'Division': 'Design'
        }]
    }];
}

<html xmlns="http://www.w3.org/1999/xhtml">
    
    <head runat="server">
        <title></title>
        <script src="JS/test.js"></script>
    </head>
    
    <body>
        <div ng-app="plunker" ng-controller="AccordionDemoCtrl">
            <accordion>
                <accordion-group heading="{{group.Division}}" ng-repeat="group in groups">
                    <accordion-heading> <span ng-click="opened(group, $index)">
                        {{group.Division}}
                    </span>

                    </accordion-heading>
                    <ul class="ulaccordionscroll" style="height:250px;overflow-y:auto;">
                        <li ng-repeat="item in group.items">{{item['Name']}}</li>
                    </ul>
                </accordion-group>
            </accordion>
        </div>
    </body>

</html>

Actually, If I run this script, it's working fine. But in my case, I'm loading this page into another page using ajax on a button click.

Master page

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.3.0.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet" />

 <a onclick="redirect()">click</a>
 <div id="maindiv" style="background-color:#eee;padding:50px;"></div>

<script>
        function redirect() {
            debugger;
            $.ajax({
                url: '/Default.aspx/',
                type: "GET",
                success: function (response) {
                    debugger;
                    $("#maindiv").empty();
                    $('#maindiv').html(response);
                },
                error: function (err) { debugger; }
            });
        }
    </script>

But the angular code is not working. I've made a sample video describing my error.
Sample Video Link

I've followed this link to get angular accordion

Note : Unfortunately, the code snippet is not working because of the test.js reference

I think the problem has nothing to do with the accordion. I suggest you reduce the template being loaded via ajax to a very simple ng-model binding to illustrate the problem. — lex82
– lex82, Commented Nov 18, 2015 at 7:06
By looking at your code, I didn't see any code that register your AccordionDemoCtrl function to be a controller for Angular. It should have angular.module('plunker').controller('AccordionDemoCtrl', AccordionDemoCtrl); — murnax
– murnax, Commented Nov 18, 2015 at 7:31
@RealSteel, your ajax result is an html and it was not compiled by angular. You need compile your result before append it to your current page. — Abhilash Augustine
– Abhilash Augustine, Commented Nov 18, 2015 at 7:48
@RealSteel angular.module('plunker', ['ui.bootstrap']); is not manual bootstrapping. You need to bootstrap application manually by providing application root. — dfsq
– dfsq, Commented Nov 18, 2015 at 10:55

RealSteel · Accepted Answer · 2015-11-18 12:02:16Z

By @dfsq Comment : we need to bootstrap application manually by providing application root.

I've done the following changes and it worked for me!!!

angular.module('plunker', [])
      .controller('AccordionDemoCtrl', ['$scope', function ($scope) {
          $scope.groups = [
      {
          DivisionId: 1, Division: '.Net',
          items: [{ 'Id': 1, 'Name': 'Manikishore', 'Division': '.Net' },
           { 'Id': 2, 'Name': 'Santosh', 'Division': '.Net' },
           { 'Id': 2, 'Name': 'Santosh', 'Division': '.Net' },
           { 'Id': 2, 'Name': 'Santosh', 'Division': '.Net' }]
      },
      {
          DivisionId: 2, Division: 'Design',
          items: [{ 'Id': 19, 'Name': 'Mahesh', 'Division': 'Design' },
            { 'Id': 20, 'Name': 'Hareen', 'Division': 'Design' }]
      }
          ];
      }]);


angular.element(document).ready(function () {
    angular.bootstrap(document, ['plunker', 'ui.bootstrap']);
});

Collectives™ on Stack Overflow

angular scripts not working while ajax callback

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related