угловые скрипты не работают во время обратного вызова ajax

У меня есть страница, где я определил все угловые кодировки для аккордеона. Теперь я загружаю содержимое этой страницы с помощью ajax.угловые скрипты не работают во время обратного вызова ajax

Мой Угловая содержание страницы

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 при нажатии кнопки.

Master страница

<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 ссылки

источник

2015-11-18 RealSteel

Я думаю, что проблема не имеет ничего общего с аккордеоном. Я предлагаю вам уменьшить шаблон, загружаемый через ajax, на очень простую привязку к ng-модели, чтобы проиллюстрировать проблему. – lex82

Посмотрев на свой код, я не видел никакого кода, который регистрирует вашу функцию AccordionDemoCtrl как контроллер для Angular. Он должен иметь angular.module («plunker»). Controller («AccordionDemoCtrl», AccordionDemoCtrl); – murnax

вы должны использовать Угловой способ сделать вызов Ajax. –

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

источник

2015-11-18 12:02:16 RealSteel

угловые скрипты не работают во время обратного вызова ajax

ответ

Смежные вопросы