使用 $templateCache 拉入视图时 UI 路由器控制器不工作？

Question

我正在使用gulp-angular-templatecache 将我所有的filename.view.html 文件转换为templates.js 文件。

然后我使用$stateProvider 创建我的状态并使用$templateCache 提取模板，并带有抽象的“根”状态。

$stateProvider
    .state('app', {
        abstract: true,
        template: '<div ui-view></div>'
    })
    .state('app.login', {
        url: '/login',
        template: $templateCache.get('components/login/login.html'),
        controller: 'LoginController as login'
    });

到目前为止，一切正常。模板按应有的方式加载到我的页面中，但无论我做什么，我都无法让控制器工作。

我的模块和相关的控制器比较简单：

(function () {

    'use strict';

    angular
        .module('login', [])
        .controller('LoginController', LoginController);

    function LoginController () {

        var vm = this;

        vm.loginID = 'test';
        vm.password = 'test';

        vm.doLoginRequest = function () {
            console.log('Performing login request...');
        }

    }

})();

我已经尝试了几种不同的方法，但似乎都没有奏效：

• 将模板移至模块的.run(...) 部分，并将其推入$templateCache 中
• 状态配置中 template、templateUrl 和 templateProvider 的不同变体
• 从状态中删除 controllerAs 语法并改用 ng-controller
• 使用旧式控制器语法（即不是 controllerAs 语法）

有人对我如何解决此问题有任何建议吗？我已经把头发扯了好几个小时了！

Answer 1

事实证明，我在我的登录模板上使用了 <form> 元素，出于某种原因 Angular 确实喜欢它。我猜我错误地实现了 <form> 以使其与 Angular 一起工作。

删除 <form> 元素可以解决问题。

Answer 2

如何预加载模板：

1) 运行你的任务，生成 template.js 视图

2) 在您的索引文件中，预加载所有模板

  <script src="build/templates.js"></script>

3) 包含你的模块作为依赖（自动任务通常会创建一个单独的模块，确保你检查，模块的名称是什么）

angular.module('app', ['templates'])

4) 在 app.config 部分中，只需引用视图，就好像您在没有缓存的情况下加载它们一样

 .state('home', {
        url: '/home',
        views: {
            "@": {
                controller: 'homeController',
                templateUrl: 'app/views/home.html'

            },
        }

    })