Question

使用ngAnimate和ui-view时遇到错误。上载或单击任何导航菜单; angular-animate.js生成'对象不是函数'错误。

这里是主要的javacsript应用程序：

(function () {
'use strict';
var app = angular.module("pie", ['ui.router', 'uiGmapgoogle-maps', 'ui.bootstrap', 'ngAnimate']);

app.config(["$stateProvider", "$locationProvider", "$urlRouterProvider",
function ($stateProvider, $locationProvider, $urlRouterProvider) {

    $locationProvider.html5Mode({ enabled: true, requireBase: false });

    $urlRouterProvider.otherwise('/Welcome');
    $stateProvider
        .state("Welcome", {
            url: "/Welcome",
            templateUrl: "../Scripts/Home/WelcomeView.html",
            controller: "WelcomeController"
        })
        .state("About", {
            url: "/About",
            templateUrl: "../Scripts/Home/AboutView.html",
            controller: "AboutController"
        })
        .state("Contact", {
            url: "/Contact",
            templateUrl: "../Scripts/Home/ContactView.html",
            controller: "ContactController"
        })
        .state("Login", {
            url: "/Account/Login"
        })
        .state("Register", {
            url: "/Account/Register"
        })
        .state("ForgotPassword", {
            url: "/Account/ForgotPassword"
        });
}]);

//app.animation('.view-animation', function () {
//    return {
//        enter: function (element, done) {
//            element.css({
//                opacity: 0.5,
//                position: "relative",
//                top: "10px",
//                left: "20px"
//            }).animate({
//                top: 0,
//                left: 0,
//                opacity: 1
//            }, 1000, done);
//        }
//    };
//});

app.config(['$httpProvider', function ($httpProvider) {
    //Http Intercpetor to check auth failures for xhr requests
    $httpProvider.interceptors.push('AuthHttpResponseInterceptor');
}]);

// Google map
app.config(['uiGmapGoogleMapApiProvider', function (uiGmapGoogleMapApiProvider) {
    uiGmapGoogleMapApiProvider.configure({
        //    key: 'your api key',
        v: '3.17',
        libraries: 'weather,geometry,visualization'
    });
}
]);

}());

令人惊讶的是，动画似乎有效，但我更愿意解决错误：

这是Angular-anumate.js中生成错误的地方：

function fireDoneCallbackAsync() {
                                          fireDOMCallback('close');
                                          if (doneCallback) {
                                              $$asyncCallback(function () {
                                                  doneCallback();
                                              });
                                          }
                                      }

我使用vs2013作为IDE，所有javascripts文件和库都插在页面底部;我尝试通过捆绑或常规脚本注入show，但没有区别：

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/bundles/angularjs")
@*@Scripts.Render("~/bundles/angularAnimate")*@
<script src="~/Scripts/angular-animate.js"></script>
@Scripts.Render("~/bundle/app")

任何帮助将不胜感激。感谢

EDITED 即使我评论app.animation调用时，错误仍然存在（参见上面的代码）。只需注入ngAnimate就会生成错误

var app = angular.module("pie", ['ui.router', 'uiGmapgoogle-maps', 'ui.bootstrap', 'ngAnimate']);

IIFE可以成为原因吗？

Answer 1

使用ngAnimate时要记住的一件非常重要的事情是ngAnimate版本必须与您正在使用的角度版本相同。

也就是说，如果你使用v 1.3.4 of angular，你应该使用v 1.3.4的角度动画。

由于仅包含库会给您错误，我希望您的版本不同步。

ngAnimate对象未设置为函数

1 个答案: