Question

我是Angular的新手。我正在使用ngRoutes加载动态视图（非常酷），我正在加载各自的.js控制器以使其更酷。但是，由于引导已经发生，我很难绑定它们;

我在“../partials/inicio.php”中有一个视图，其控制器位于“/assets/js/partials/inicio/inicio.js”中，两者都没有在bootstrap之前加载。要在url标记为“/”时加载它们，我使用main.js中的下一个方法:(并且加载它们没有问题）。

main.js

  app.config(['$routeProvider', function ($routeProvider) {
    $routeProvider
      .when("/", {templateUrl: "../partials/inicio.php", 
            resolve:{
              load: function($q, $route, $rootScope) {

                var deferred = $q.defer();

                var dependencies = [
                  '/assets/js/partials/inicio/inicio.js'
                ];

                $script(dependencies, function () {
                  $rootScope.$apply(function() {
                    deferred.resolve();
                    console.log("The promise has resolved.");
                  });
                });
                console.log("The promise was made.");
                return deferred.promise;
              }
            }
          })

资产/ JS /分音/ INICIO / inicio.js

  app.controller('inicio', function ($scope) {
     console.log("Controller responds from the INSIDE in inicio.js");
  });

  console.log("Controller responds from the OUTSIDE in inicio.js");

../ parcials / inicio.php

 <script>console.log("View is loaded in inicio.php");</script>

 <div class="container" id="inicio" ng-controller="inicio">
 </div>

因此，如果您注意到 console.logs ，则会按如下方式呈现它们： Console output

因此视图和控制器都以“正确的顺序”加载（首先是控制器，然后是视图）。显然我在加载视图时遇到错误，因为它找不到ng-controller“inicio”。

如何绑定它们？如何在引导程序后“注册”控制器并将其附加到视图中？

请记住：

我不想预加载控制器或其声明。
如果我必须添加模块或引用依赖项（例如ControllerProvider），我需要知道它们必须在何时何地发生。

我非常感谢！

Answer 1

尝试在路由配置中添加controller字段。之后，您无需在任何地方使用ng-controller，因为它会自动分配给模板：

$routeProvider
  .when("/", {templateUrl: "../partials/inicio.php", 

        // assigning a controller to the view
        controller: 'inicio',

        resolve:{
          // loading dependencies
        }
      })

然后，使用ng-view代替ng-controller。这应放在主html文件（index.html或index.php）中。

<div class="container" id="inicio" ng-view>
</div>

这应首先加载脚本，然后将控制器分配给视图。这样，当路由改变时，partials将被加载到具有ng-view指令的div中。

修改

如果您需要一个应该应用于所有部分视图的控制器（例如index.html中的导航栏控制器），您始终可以为此一个控制器添加script标记。其余的可以在路由配置中的resolve内动态加载。

修改2

我试图进一步调查这个问题，但不管我做了什么，我都遇到了和你一样的错误。但是，我可以提供一个解决方案，其中包含我在过去的一个项目中使用的不同脚本加载库：ocLazyLoad（https://oclazyload.readme.io/docs）。我测试了它，它没有任何问题。将ocLazyLoad添加到项目后需要执行的操作是：

第1步

将'oc.lazyload'模块添加到应用模块，例如angular.module('app', ['oc.lazyload'])

第2步

将resolve部分更改为：

//... resolve:{ load: function($ocLazyLoad) { var dependencies = [ '/assets/js/partials/inicio/inicio.js' ]; return $ocLazyLoad.load(dependencies); } //...

Angular：在ngRoutes上引导后，将新加载的“.js”控制器绑定到新加载的“html”视图

1 个答案: