Question

我有一个页面，我已经定义了手风琴的所有角度编码。现在，我正在使用ajax加载该页面内容。

我的角度页面内容

＆＃13;

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

＆＃13;

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

＆＃13;

实际上，如果我运行此脚本，它的工作正常。但在我的情况下，我在按钮点击时使用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>

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

我已经按照link来获得角度手风琴

注意：很遗憾，由于test.js引用

，代码段无法正常工作

Answer 1

通过@dfsq评论：我们需要通过提供应用程序root来手动引导应用程序。

我做了以下更改，它对我有用!!!

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

角度脚本在ajax回调时不起作用

1 个答案: