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

如何预加载模板：

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>元素可以解决问题。

使用$ templateCache引入视图时，UI路由器控制器无法正常工作？

2 个答案: