angularJS显示空白页面没有错误-控制器问题

angularJS displaying blank page without errors - controller issues

本文关键字：有错误 控制器 问题 显示 空白 angularJS      更新时间：2023-09-26

我正在尝试将ngAnimate指令写入控制器。我在一个单独的文件中加载我的应用程序，并像这样配置路线：

angular
.module('CurriculumApp', ['ui.router', 'ngAnimate'])
.config(function($stateProvider, $urlRouterProvider) {
    //catchall route points to landing
    $urlRouterProvider.otherwise("/landing")
    //app routes
    $stateProvider
        //landing page
        .state('landing', {
        url: '/landing',
        templateUrl: '/../views/landing.html'
        })
        //skills page
        .state('skills', {
        url: '/skills',
        templateUrl: '/../views/skills.html'
        })
        //portfolio page
        .state('portfolio', {
        url: '/portfolio',
        templateUrl: '/../views/portfolio.html',
        controller: 'portfolioController'
        });
    });

现在，如果我在没有依赖项的情况下初始化我的控制器（这是一个单独的.js文件）：

angular
  .module('CurriculumApp')
  //portfolio controller
  .controller('portfolioController', function($scope) {
      .animation ('.img-thumbnail', function() {
        return {
          move: function(element, done) {
            $(element).toggle("bounce", { times : 3 }, "slow");
          }
        }
      }); //closes .animation
  })// closes controller

我得到以下错误：

Error: (intermediate value).animation is not a function

但当我尝试像主应用程序一样初始化它时：

  .module('CurriculumApp', ['ui.router', 'ngAnimate'])

我只得到一个空白页面，没有加载模板，也没有任何错误消息。

我正在努力学习本教程的Javascript动画部分。

感谢您的任何见解/帮助。

如果您正试图将动画添加到您的模块中，那么我相信您希望您的代码看起来像这样：

angular.module('CurriculumApp')
//portfolio controller
.controller('portfolioController', function($scope) {
    // Controller stuff goes here
})// closes controller
.animation ('.img-thumbnail', function() {
    return {
        move: function(element, done) {
            $(element).toggle("bounce", { times : 3 }, "slow");
        }
    }
}); //closes .animation

.animation的左侧没有任何内容，这就是它无法工作的原因（如果您删除空白，本质上就是function($scope){.animation(...，即您在无内容的情况下调用动画方法，这就是您收到错误的原因。

我认为.animation方法应该在模块上调用，即这应该起作用：

angular
  .module('CurriculumApp')
  .controller('portfolioController', function($scope) {
  })
  .animation ('.img-thumbnail', function() {
     return {
       move: function(element, done) {
         $(element).toggle("bounce", { times : 3 }, "slow");
       }
     }
   });
相关文章：