Question

假设我有这个模板：

{% load staticfiles %}
{% load facebook %}
<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>Autos Queridos | Mu&eacute;stranos cu&aacute;nto sabes</title>
        <link rel="stylesheet" type="text/css" href="{% static 'css/index.css' %}" />
        <script type="text/javascript" src="{% static 'js/angular.min.js' %}"></script>
        <script type="text/javascript" src="{% static 'js/angular-ui-router.min.js' %}"></script>
        <script type="text/javascript" src="{% static 'js/index.js' %}"></script>
        {% facebook_init %}
            _FacebookSrv.initialize();
        {% endfacebook %}
        <script type="text/javascript">
            AutosQueridos.constant('AutosQueridos.StaticUrl', '{{ STATIC_URL }}');
            angular.bootstrap(document, ['AutosQueridos']);
        </script>
    </head>
    <body ng-controller="AutosQueridos.Base">
        {% verbatim angular %}
        <div ui-view>
            <!-- aca es donde va toda la aplicacion -->
        </div>
        {% endverbatim angular %}
    </body>
</html>

让我们分析一下：

angular.bootstrap，因为我需要事先将STATIC_URL配置为服务。在通话之前定义了这种不变的服务。
_FacebookSrv.initialize();是一个自定义调用，稍后我会介绍。它在window.fbAsync的上下文中执行（它不直接与Angular对象的正常流程，也不与任何范围或DOM交互）。
body有一个控制器我们稍后会讨论（这是问题的焦点）。
内部div中有ui-view指令，因为我使用ui.router作为状态处理程序库。

让我们描述在这种情况下不应该注意的事情：

{% load xxx %}标记根本不会生成任何输入。
{% verbatim xxx %} / {% endverbatim xxx %}根本不生成任何输入，但是是特定于框架的标记。
{% static xxx %}标记的目的是找到实际的文件路径。

因此，没有什么可担心的标签 - 它们是Django特有的并且表现得像预期的那样。

css/index.css文件还没有。角度代码位于js/index.js：

AutosQueridos = angular.module('AutosQueridos', ['ui.router']);

var _FacebookSrv = {
    /* ... */
    initialize: function() {
        /* ... */
    },
    /* ... */
};

/* contents of _FacebookSrv are trimmed to narrow the problem. it is used by AutosQueridosFB and the initialize() has not met the conditions to do anything useful yet, with the code I wrote in my template */

var AutosQueridosFB = function($scope) {
    this.$scope = $scope;
};

/* methods of AutosQueridosFB were trimmed to narrow the problem. this factory is not yet used*/

AutosQueridos_Facebook = AutosQueridos.factory('AutosQueridos.Facebook', ['$scope', function($scope){ return new AutosQueridosFB($scope); }]);

AutosQueridos_Base = AutosQueridos.controller('AutosQueridos.Base', ['$state', '$rootScope', function($state, $rootScope){
    /* pay attention to THIS controller */
    console.log('nestor');
    $state.go('welcome');
}]);

AutosQueridos_Welcome = AutosQueridos.controller('AutosQueridos.Welcome', ['$scope', '$state', '$rootScope', function($scope, $state, $rootScope){
    /* there's nothing yet in these controllers */
}]);

AutosQueridos_Roulette = AutosQueridos.controller('AutosQueridos.Roulette', ['$scope', '$state', '$rootScope', '$http', function($scope, $state, $rootScope, $http){
    /* there's nothing yet in these controllers */
}]);

AutosQueridos_Trivia = AutosQueridos.controller('AutosQueridos.Trivia', ['$scope', '$state', '$rootScope', '$http', function($scope, $state, $rootScope, $http){
    /* there's nothing yet in these controllers */
}]);

AutosQueridos.config(['$stateProvider', 'AutosQueridos.StaticUrl', function($sp, url) {
    //
    // Now set up the states
    $sp
        .state('welcome', {
            templateUrl: url + "partials/welcome.html",
            controller: 'AutosQueridos.Welcome'
        })
        .state('roulette', {
            templateUrl: url + 'partials/roulette.html',
            controller: 'AutosQueridos.Roulette'
        })
        .state('trivia', {
            templateUrl: url + 'partials/trivia.html',
            controller: 'AutosQueridos.Trivia'
        })
}]);

我的问题就在这里：AutosQueridos.Base中的body控制器永远不会被执行：我没有看到“内容”＃39;在控制台中显示，也不欢迎＆＃34;欢迎＆＃34;状态被反映（状态模板有愚蠢的内容，比如＆＃34;欢迎！＆＃34;）。 我缺少什么？

已更新：我没有收到任何4xx / 5xx错误 - 文件按预期加载。我没有在控制台中收到javascript错误。

Answer 1

只有在加载了所有模块且文档准备就绪后才需要启动引导程序。因此，将您的函数包装在文档中就像这样： -

angular.element(document).ready(function() {
  angular.bootstrap(document, ['AutosQueridos']);
});

这是您的代码应遵循的顺序：

在加载页面和所有代码之后，找到AngularJS应用程序的根元素，该元素通常是文档的根目录。
调用angular.bootstrap将元素编译为可执行的双向绑定应用程序。

控制器永远不会执行

1 个答案: