Angular загрузочная загрузка после загрузки html

Ответ 1

Динамически загружает контроллер AngularJS

Ответ на этот вопрос поставил мою проблему. Поскольку мне нужно создать контроллеры после добавления содержимого в DOM. Это исправление требует, чтобы я тоже регистрировал контроллеры после того, как я это объявил. Если у кого-то есть более легкое решение, попробуйте вставить.

Ответ 2

Я повторю то, что говорили другие: такая вещь вообще плохая идея, но я также понимаю, что вам иногда приходится работать с устаревшим кодом так, как вы бы этого не хотели. Все, что вы сказали, вы можете превратить HTML, загруженный извне Angular в Angular -граничные виды с помощью службы $compile. Здесь, как вы можете переписать свой текущий пример, чтобы он работал с $compile:

// We have to set up controllers ahead of time.
myApp.controller('AfterCtrl', function($scope)  {
  $scope.loaded = 'Is now loaded';
});

//loads html and afterwards creates a controller
$('button').on('click', function() {
  $.get('ajax.html', function(data) {

    // Get the $compile service from the app injector
    var injector = $('[ng-app]').injector();
    var $compile = injector.get('$compile');

    // Compile the HTML into a linking function...
    var linkFn = $compile(data);
    // ...and link it to the scope we're interested in.
    // Here we'll use the $rootScope.
    var $rootScope = injector.get('$rootScope');
    var elem = linkFn($rootScope);
    $('.content').append(elem);

    // Now that the content has been compiled, linked,
    // and added to the DOM, we must trigger a digest cycle
    // on the scope we used in order to update bindings.
    $rootScope.$digest();

  }, 'html');
});

Вот пример: http://plnkr.co/edit/mfuyRJFfA2CjIQBW4ikB?p=preview

Это упрощает некоторые вещи, если вы можете создать свою функциональность в качестве директивы вместо использования raw jQuery - вы можете вставлять в нее службы $compile и $rootScope или даже использовать локальную область внутри директивы. Еще лучше, если вы можете использовать динамическое связывание в элементе <ng-include>.

Ответ 3

Ваш подход кажется неправильным. Вы используете jQuery и Angular вместе неподходящим способом, который может иметь конфликты.

Angular встроенная поддержка шаблонов - лучший способ сделать это либо с помощью ng-include, либо вы можете использовать маршрутизацию Angular и вместе с ng-view. Документация находится здесь:

http://docs.angularjs.org/api/ng.directive:ngInclude

http://docs.angularjs.org/api/ngRoute.directive:ngView

Простейшим возможным было бы просто установить ng-include в строку url:

<div ng-include="'ajax.html'"></div>

Если вам действительно нужно загрузить динамически, когда вы что-то делаете, это более полное решение для вас:

http://plnkr.co/edit/a9DVEQArS4yzirEQAK8c?p=preview

HTML:

<div ng-controller="InitCtrl">
    <p>{{ started }}</p> 
    <button ng-click="loadTemplate()">Load</button>
    <div class="content" ng-include="template"></div>
</div>

JavaScript:

var myApp = angular.module('myApp', [])
.controller('InitCtrl', function($scope) 
{
    $scope.started = 'App is started';
    $scope.loadTemplate = function() {
      console.log('loading');
      $scope.template = "ajax.html";
    }
}).controller('AfterCtrl', function($scope) 
{
    $scope.loaded = 'Is now loaded';
});

Ответ 4

Еще одна ошибка, которая приводит к этой ошибке Bootstrapping, - это сценарии nginclude или ngview, в которых ваш динамический html включает script ссылки на angular js.

Мой html ниже вызывал эту проблему, когда он был введен в существующую страницу angular. Ссылка на angular.min.js вызвала перезагрузку angular:

<div id="fuelux-wizard" class="row-fluid" data-target="#step-container">
    <ul class="wizard-steps">
       <li data-target="#step1">
            <span class="step">1</span>
            <span class="title">Submit</span>
        </li>    
        <li data-target="#step2">
            <span class="step">2</span>
            <span class="title">Approve</span>
        </li>    
        <li data-target="#step3">
            <span class="step">3</span>
            <span class="title">Complete</span>
        </li>
    </ul>
</div>

<script src="/Scripts/Angular/angular.min.js"></script>
<script type="text/javascript">    
    angular.element('#requestMaster').scope().styleDisplayURL();
</script>