Question

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

一个模板的DIV与 ng-app 有时会开始工作。我尝试使用带有一个控制器的简单模块，只记录“我在这里！”进入控制台，但它有时只工作（我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>

Answer 1

尝试删除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/

ng-app并不总是开始

1 个答案: