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

Question

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

然后我使用 $stateProvider 创建我的状态，并使用 $templateCache 和抽象 "root" 状态引入模板。

$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...');
        }

    }

})();

我尝试了几种不同的方法来解决这个问题，但 none 似乎奏效了：

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

有人对我如何解决这个问题有什么建议吗？我已经撕了好几个小时的头发了！

Answer 1

如何预加载模板：

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'

            },
        }

    })

Answer 2

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

一起使用

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

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

UI Router controller not working when view is pulled in with $templateCache?

javascript

angularjs

angular-ui-router

angular-templatecache