javascript - ngAnimate 依赖导致应用程序不显示-6ren

javascript - ngAnimate 依赖导致应用程序不显示

转载作者：行者123 更新时间：2023-11-28 20:01:43

28

4

我试图将动画引入我的应用程序，但是当我在应用程序中包含 ngAnimate 依赖项时，它不会加载，也不会在控制台中出现任何错误，这使得调试非常困难。

index.html:

<html>
<head >
    <!-- Styles -->
    <link rel="stylesheet" type="text/css" href="/Style%20Library/projects/spDash/app/css/main.css"/>
    <link rel="stylesheet" type="text/css" href="/Style%20Library/projects/spDash/app/css/sidebar.css"/>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="/Style%20Library/projects/spDash/app/css/bootstrap3.css">
</head>

<body>
    <div id="mdContainer" ng-cloak>
        <!-- Navigation --> 
        <div id='mdSidebar'>
            <ul>
               <li id="menuHome"><a href='#/home'><span>Home</span></a></li>
               <li id="menuUsers"><a href='#/userView'><span>Users</span></a></li>
               <li id="menuGroups"><a href='#/groupView'><span>Groups</span></a></li>
               <li id="menuSites"><a href='#/sitesView'><span>Sites</span></a></li>
               <li id="menuReports"><a href='#'><span>Reports</span></a></li>
            </ul>
        </div>

        <!-- Main view --> 
        <ng-view>
            <div class="mainView">
                <h1 class="topPanel">This is place holder text until I build a home page</h1>
            </div>
        </ng-view>
    </div>

    <!-- Scripts -->
    <script type="text/javascript" src="https://hosted.compulite.ca/Style%20Library/projects/spDash/app/js/spAppLoader.js"></script>
</body>
</html>

scriptAppLoader.js:

$LAB
    .script("//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-animate.js")
    .script("//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-route.js")
    /*.script("//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-route.min.js")*/
    /*.script("//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-animate.min.js")*/   
    /*.script("//cdnjs.cloudflare.com/ajax/libs/select2/3.4.5/select2.min.js")*/
    .script("//cdnjs.cloudflare.com/ajax/libs/select2/3.4.5/select2.js")
    .script("https://hosted.compulite.ca/Style%20Library/projects/spDash/app/js/app.js")
    .script("//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.min.js")
    .script("https://hosted.compulite.ca/Style%20Library/projects/spDash/app/js/controllers/userCtrl.js")
    .script("https://hosted.compulite.ca/Style%20Library/projects/spDash/app/js/controllers/groupCtrl.js")
    .script("https://hosted.compulite.ca/Style%20Library/projects/spDash/app/js/controllers/newGroupCtrl.js")
    .script("https://hosted.compulite.ca/Style%20Library/projects/spDash/app/js/controllers/siteCtrl.js")
    .script("https://hosted.compulite.ca/Style%20Library/projects/spDash/app/js/services/userServices.js")
    .script("https://hosted.compulite.ca/Style%20Library/projects/spDash/app/js/services/groupServices.js")
    .script("https://hosted.compulite.ca/Style%20Library/projects/spDash/app/js/services/siteServices.js")
    .wait(function(){
          var root = document.getElementById('mdContainer')
          angular.bootstrap(root ,['spApp']);
        })

app.js:

var spApp = angular.module('spApp', ['ngRoute','ngAnimate','ui.bootstrap'])
    .config(function($routeProvider, $locationProvider){
        var rootUrl = '/Style%20Library/projects/spDash/app/partials/';

        $routeProvider
        .when('/home', 
        {
            templateUrl: rootUrl+'home.html'
        })
        .when('/userView', 
        {
            templateUrl: rootUrl+'userView.html', 
            controller: 'userCtrl'
        })
        .when('/groupView', 
        {
            templateUrl: rootUrl+'groupsView.html', 
            controller: 'groupCtrl' 
        })
        .when('/sitesView',
        {
            templateUrl: rootUrl+'sitesview.html',
            controller: 'sitesCtrl'
        })
        .otherwise({redirectTo:'/home'});
        //$locationProvider.html5Mode(true);
    });

最佳答案

angular.js 版本为 1.2.4

angular-animate.js 版本为 1.2.10

进行更新，使其成为最新版本，就可以了。

关于javascript - ngAnimate 依赖导致应用程序不显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21559389/

28

4

0

文章推荐： javascript - 在其他 JQuery 对象中查找 JQuery 对象

文章推荐： c - 如何模拟内存分配失败？

文章推荐： Java注解——代码简化

angularjs - ngAnimate - 双向滑动
我正在努力解决一个问题:我有一个包含 x 数量项目的菜单。在这个例子中，我有三个项目。每个项目都有一个内容部分，因此通过单击菜单项，内容应该滑入。到目前为止，我所取得的成就是，当您从“项目 1”
javascript - ngAnimate 的离开回调的速度动画
我试图让离开动画与速度和 Angular 一起工作，以便当表格行离开时它们会向右移动。在示例中，我使用离开回调来尝试动画离开 ng-repeat，但回调运行但没有任何反应! angular.modu
angularjs - 禁用某些元素的 nganimate
我正在使用 ngAnimate 模块，但我所有的 ng-if、ng-show 等都受此影响，我想利用 ngAnimate 来实现一些功能选定的元素。对于性能和元素中的一些错误，显示和隐藏速度非常快。
angularjs - ngAnimate 导致错误
Error: f.element._data is not a function t@http://localhost:3000/lib/angular-animate/angular-animate
css - ngAnimate 可以进行条件转换吗？
我已经使用 ngAnimate 在 ngView 上的应用程序中设置了动画。每次状态发生变化时，下一个 View 都会从右侧滑入。我希望能够扭转这一情况，以便在某些情况下， View 从左侧滑入(如
angularjs - ngAnimate 对象未设置为函数
我在使用 ngAnimate 和 ui-view 时遇到错误。加载或点击任何导航菜单； angular-animate.js 生成“对象不是函数”错误。这里是主要的 javacsript 应用程序:
javascript - ngAnimate 什么都不做？
我的 HTML 看起来像这样； {{msg.loading || 'loading'}} {{msg.loadingPerc}}%
javascript - ngAnimate 依赖导致应用程序不显示
我试图将动画引入我的应用程序，但是当我在应用程序中包含 ngAnimate 依赖项时，它不会加载，也不会在控制台中出现任何错误，这使得调试非常困难。 index.html:
javascript - ngAnimate 不再工作了吗？
我无法使用简单的 Angular 动画。我做了一个简单的 Plunkr 来展示它:https://plnkr.co/edit/bKZev3i1WhNgKhsWOZIQ HTML
javascript - 如何让元素停止触发 ngAnimate？
我正在为我的元素制作一个内容 slider ，但我对 AngularJS 的经验很少。我找到了 this plunker这非常适合我的需要。可以看我的直播page here .它是俄语，但我希望这不会
javascript - ngAnimate 动画不显示
在过去的 10 个小时里，我一直在努力让动画发挥作用，只有在我添加 animate.css 样式表并使用“动画类名”时它们才能发挥作用，但是当我想为进入和离开制作自定义动画时，我做不到无论如何它都能工
javascript - 我似乎无法运行 ngAnimate？
我有 ngAnimate 依赖注入(inject)问题。我不知道为什么，但每当我将 ngAnimate 作为依赖项包含在我的 js 代码中时，它就不起作用......这不是剧本... 我有这个 htm
javascript - ngAnimate 最大高度不适用于某些元素
我已经在元素中实现了 ngAnimate 以帮助制作动画，但我在某些元素上遇到了非常奇怪的行为。为了添加一些背景，我们有一个商店，其中包含类别和类别内的产品。我正在执行 ng-repeat: dat
html - ngAnimate 的幻灯片效果
我尝试使用 angular 和 ngAnimate 来获得幻灯片效果。我可以很好地作为 opacity 的淡入/淡出效果。 .show-animation { -webkit-transition
css - ngAnimate - 动画不会在重复的自定义指令上触发
我想在使用 ng-repeat 重复的自定义指令上使用 ngAnimate。如果我在一个简单的 html 列表项上使用 ng-repeat，动画效果很好。但是，只要用自定义指令元素替换列表项，就不会触
javascript - 具有折叠效果的 ngAnimate
我正在尝试使用 ngAnimate 折叠进/出框。我做了类似的事情并且它有效，但我如何摆脱高度属性？可以使用装箱来扩展(其中的文本)，但文本会超出边缘。 .myTest { transition:
unit-testing - ngAnimate 单元测试不添加类
我是单元测试以及 ng-animate 模块的新手。我做了一个简单的指令来测试 ng-animate。 .directive('slideShow', function ($animate, $co
angularjs - Angular ngAnimate 抛出错误
我正在尝试使用 ngAnimate 制作一些动画，但我什至无法开始使用它。问题是，当我尝试将 ngAnimate 依赖项添加到应用程序文件时，它会在控制台中向我抛出此错误，并且我的应用程序无法运行。
javascript - 由于 :，无法实例化模块 ngAnimate
我在构建 Angular JS 项目时遇到问题。它说无法实例化模块 ngAnimate，原因是: 我已将所有服务放入 [] 中，但 ngAnimate 无法正常工作。这是应用程序无法实例化模块
javascript - 添加 ngAnimate 对模块的依赖
我已经将脚本链接到我的 html 文件以进行 angularjs、清理和动画处理: 当我将 ngAnimate 作为依赖项添加到我的模块时，就像这样: var nameSpace = angu

首页

博学

6Ren·AI

商城

javascript - ngAnimate 依赖导致应用程序不显示