ng-app并不总是启动

ng-app not always starting

本文关键字:启动 ng-app      更新时间:2023-09-26

我的新项目开始遇到问题,我在金字塔服务的 jinja2 模板中使用角度应用程序。

一个模板具有带有 ng-app 的 DIV,它仅在有时开始工作。我尝试使用带有一个控制器的简单模块,该控制器仅将"我在这里!"记录到控制台中,但它仅在有时起作用(我 100% 确定模板已正确呈现)。

我对此问题的解决方法是同时使用 ng-app 标签和使用 angular.bootstrap,这有时会产生错误,但会使应用程序正常工作。无论出于何种原因,仅使用 angular.bootstrap 并不总是有效。

我在这里错过了什么吗?

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>

尝试删除 ng-app,将控制器放在 ng-view 上,然后像这样调用 angular.bootstrap:

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

让 angular.element 包起来 DOMElement 比自己动手要好。

看看这个小提琴:http://jsfiddle.net/u78meq8g/