angular 脚本在 ajax 回调时不工作

Question

我有一个页面，我在其中定义了手风琴的所有 angular 编码。现在，我正在使用 ajax.

加载该页面内容

我的angular页面内容

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>

实际上，如果我运行这个脚本，它工作正常。但就我而言，我在单击按钮时使用 ajax 将此页面加载到另一个页面。

主页

<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>

但是 angular 代码不起作用。我制作了一个示例视频来描述我的错误。
Sample Video Link

我按照这个 link 得到了 angular 手风琴

注意：不幸的是，由于 test.js 引用

，代码片段无法正常工作

Answer 1

来自@dfsq 评论：我们需要通过提供应用程序根目录来bootstrap 手动应用程序。

我做了以下更改并且对我有用！！！

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']);
});

angular 脚本在 ajax 回调时不工作

angular scripts not working while ajax callback

ajax

jquery

accordion

angularjs