ng-app并不总是启动

Question

I started having problems in my new project, where I'm using angular apps in pyramid served jinja2 templates.

One template has DIV with ng-app that starts working only sometimes. I tried with simple module with one controller that only logs "I'm here!" into console, but it worked only sometimes (I'm 100% sure template was rendered correcly).

My workaround for this problem is to use ng-app tag and to use angular.bootstrap at the same time, which sometimes generates errors, but makes app work. For whatever reason just using angular.bootstrap does not always work.

Am I missing something here?

 var ticketApp = angular.module('ticketApp', ['ngRoute', 'ui.bootstrap']); ticketApp.factory('ticketAppData', function() { var all_ticket_data = {}; return {all_ticket_data: all_ticket_data}; }); ticketApp.controller('TicketAppController', function($scope, ticketAppData) { }); ticketApp.controller('TicketAppListController', function($scope, ticketAppData) { $scope.data = ticketAppData; }); ticketApp.controller('TicketAppDetailsController', function($scope, ticketAppData) { $scope.data = ticketAppData; }); ticketApp.config(['$routeProvider', function($routeProvider) { $routeProvider. when('/list', { templateUrl: '/static/ticket-ng-app/views/list.html', controller: 'TicketAppListController' }). when('/details/:ticket_id', { templateUrl: '/static/ticket-ng-app/views/details.html', controller: 'TicketAppDetailsController' }). otherwise({ redirectTo: '/list' }); } ]); angular.bootstrap($('#ticketApp-window'), ['ticketApp']); 

 <div id="ticketApp-window" ng-app="ticketApp" ng-controller="TicketAppController"> <div ng-view class="ticket-app-view"></div> </div> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular-route.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap.js"></script> <script src="../../static/ticket-ng-app/app.js"></script> 

Answer 1

Try removing ng-app, putting the controller on the ng-view and calling angular.bootstrap like this:

var ticketAppWin = document.getElementById('ticketApp-window');
angular.bootstrap(angular.element(ticketAppWin), ['ticketApp']);

It's better to let angular.element wrap up the DOMElement than doing it yourself.

Check out this fiddle: http://jsfiddle.net/u78meq8g/