0

I am using gulp-angular-templatecache to convert all of my filename.view.html files into a templates.js file.

I'm then using $stateProvider to create my states and pull in the templates using $templateCache, with an abstract "root" state.

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

Up to this point everything works fine. The templates load into my page just as they should, but no matter what I do I cannot get the controllers to work.

My modules and associated controllers are relatively simple:

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

    }

})();

I have tried a few different ways around this but none have appeared to work:

  • Moved template into the .run(...) section of the module and pushed it into $templateCache there instead
  • Different variations of template, templateUrl and templateProvider inside of the state config
  • Removing the controllerAs syntax from the state and using ng-controller instead
  • Using the old-style controller syntax (i.e. not controllerAs syntax)

Does anyone have any suggestions on how I may resolve this issue? I've been tearing my hair our for hours!

4

2 回答 2

0

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

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

于 2016-06-08T01:29:42.487 回答
0

如何预加载模板：

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'

            },
        }

    })
于 2016-06-08T00:20:56.690 回答