不确定我在这里做错了什么。基本上只是设置路由以在页面加载 css 动画时显示 gif。 gif 出现了,但一切都消失了,gif 停留在页面上,我在控制台中收到“TypeError: d[h].apply is not a function”错误。任何帮助表示赞赏。 这是代码:
HTML:
<!DOCTYPE html>
<html lang="en" ng-app="OWMApp">
<head>
<meta charset="UTF-8">
<title>Open Weather Map App</title>
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="app/owm-app.css">
</head>
<body ng-class="{loading: isLoading}">
<div class="container">
<a href="#/">Home</a>
<a href="#/cities/New York">New York</a>
<a href="#/cities/Dallas">Dallas</a>
<a href="#/cities/Chicago">Chicago</a>
<a href="#/cities/NotOnList">Unsupported city</a>
<div class="animate-view-container">
<div ng-view class="animate-view"></div>
</div>
<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
<script type="text/javascript" src="bower_components/angular-route/angular-route.min.js"></script>
<script type="text/javascript" src="bower_components/angular-animate/angular-animate.min.js"></script>
<script type="text/javascript" src="app/owm-app.js"></script>
</div>
</body>
</html>
CSS:
body, html { position: relative; min-height: 100%;}
.loading {
position: relative;
height: 100%;
}
.loading:before {
position: absolute;
content: "";
left: 0;
bottom: 0;
right: 0;
top: 0;
z-index: 1000;
background: rgba(255, 255, 255, 0.9) no-repeat center center;
background-image: url('./loading-animation.gif');
}
.animate-view-container { position: relative; min-height: 100%; }
.animate-view.ng-enter,
.animate-view.ng-leave {
transition: 1s linear all;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #eee;
}
.animate-view.ng-enter { opacity: 0; z-index:100; }
.animate-view.ng-enter.ng-enter-active { opacity: 1; }
.animate-view.ng-leave { opacity: 1; z-index: 99; }
.animate-view.ng-leave.ng-leave-active { opacity: 0; }
JS:
angular.module('OWMApp', ['ngRoute', 'ngAnimate'])
.value('owmCities', ['New York', 'Dallas', 'Chicago'])
.config(['$routeProvider', function($routeProvider){
$routeProvider.when('/', {
templateUrl: 'home.html',
controller: 'HomeCtrl'
})
.when('/cities/:city', {
templateUrl: 'city.html',
controller: 'CityCtrl',
resolve: {
city: function(owmCities, $route, $location) {
var city = $route.current.params.city;
if(owmCities.indexOf(city) == -1){
$location.path('/error');
return;
}
return city;
}
}
})
.when('/error', {
template: '<p>Error - Page Not Found</p>'
});
}])
.controller('HomeCtrl', ['$scope', function($scope){
}])
.controller('CityCtrl', function($scope, city){
$scope.city = city;
})
.run(function($rootScope, $location){
$rootScope.$on('$routeChangeError', function(){
$loaction.path('/error');
});
$rootScope.$on('$routeChangeStart', function(){
$rootScope.isLoading = true;
});
$rootScope.$on('$routeChangeSuccess', ['$timeout', function(){
$timeout(function(){
$rootScope.isLoading = false;
}, 1000);
}]);
});
最佳答案
错误在这里:
$rootScope.$on('$routeChangeSuccess', ['$timeout', function(){
$timeout(function(){
$rootScope.isLoading = false;
}, 1000);
}]);
只需删除带有$timeout 的数组,只保留函数作为$on 的第二个参数。
$rootScope.$on('$routeChangeSuccess', function(){ ...
依赖注入(inject)应该在这里完成(和其他部门一样):
.run(function($rootScope, $location, $timeout){ ...
相关文档:https://docs.angularjs.org/api/ng/type/$rootScope.Scope
关于javascript - TypeError : d[h]. 应用不是函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34276841/
对于具有离线功能的智能手机应用程序,我正在为Xml文件创建单向文本同步。我希望我的服务器将增量/差异(例如GNU差异补丁)发送到目标设备。这是计划:Time=0Server:hasversion_1ofXmlfile(~800kiB)Client:hasversion_1ofXmlfile(~800kiB)Time=1Server:hasversion_1andversion_2ofXmlfile(each~800kiB)computesdeltaoftheseversions(=patch)(~10kiB)sendspatchtoClient(~10kiBtransferred)Cl
我构建了两个需要相互通信和发送文件的Rails应用程序。例如,一个Rails应用程序会发送请求以查看其他应用程序数据库中的表。然后另一个应用程序将呈现该表的json并将其发回。我还希望一个应用程序将存储在其公共(public)目录中的文本文件发送到另一个应用程序的公共(public)目录。我从来没有做过这样的事情,所以我什至不知道从哪里开始。任何帮助,将不胜感激。谢谢! 最佳答案 无论Rails是什么,几乎所有Web应用程序都有您的要求,大多数现代Web应用程序都需要相互通信。但是有一个小小的理解需要你坚持下去,网站不应直接访问彼此
我尝试运行2.x应用程序。我使用rvm并为此应用程序设置其他版本的ruby:$rvmuseree-1.8.7-head我尝试运行服务器,然后出现很多错误:$script/serverNOTE:Gem.source_indexisdeprecated,useSpecification.Itwillberemovedonorafter2011-11-01.Gem.source_indexcalledfrom/Users/serg/rails_projects_terminal/work_proj/spohelp/config/../vendor/rails/railties/lib/r
刚入门rails,开始慢慢理解。有人可以解释或给我一些关于在application_controller中编码的好处或时间和原因的想法吗?有哪些用例。您如何为Rails应用程序使用应用程序Controller?我不想在那里放太多代码,因为据我了解,每个请求都会调用此Controller。这是真的? 最佳答案 ApplicationController实际上是您应用程序中的每个其他Controller都将从中继承的类(尽管这不是强制性的)。我同意不要用太多代码弄乱它并保持干净整洁的态度,尽管在某些情况下ApplicationContr
我想在一个没有Sass引擎的类中使用Sass颜色函数。我已经在项目中使用了sassgem,所以我认为搭载会像以下一样简单:classRectangleincludeSass::Script::FunctionsdefcolorSass::Script::Color.new([0x82,0x39,0x06])enddefrender#hamlengineexecutedwithcontextofself#sothatwithintemlateicouldcall#%stop{offset:'0%',stop:{color:lighten(color)}}endend更新:参见上面的#re
我是一个Rails初学者,但我想从我的RailsView(html.haml文件)中查看Ruby变量的内容。我试图在ruby中打印出变量(认为它会在终端中出现),但没有得到任何结果。有什么建议吗?我知道Rails调试器,但更喜欢使用inspect来打印我的变量。 最佳答案 您可以在View中使用puts方法将信息输出到服务器控制台。您应该能够在View中的任何位置使用Haml执行以下操作:-puts@my_variable.inspect 关于ruby-on-rails-如何在我的R
我正在尝试用ruby中的gsub函数替换字符串中的某些单词,但有时效果很好,在某些情况下会出现此错误?这种格式有什么问题吗NoMethodError(undefinedmethod`gsub!'fornil:NilClass):模型.rbclassTest"replacethisID1",WAY=>"replacethisID2andID3",DELTA=>"replacethisID4"}end另一个模型.rbclassCheck 最佳答案 啊,我找到了!gsub!是一个非常奇怪的方法。首先,它替换了字符串,所以它实际上修改了
我有一些代码在几个不同的位置之一运行:作为具有调试输出的命令行工具,作为不接受任何输出的更大程序的一部分,以及在Rails环境中。有时我需要根据代码的位置对代码进行细微的更改,我意识到以下样式似乎可行:print"Testingnestedfunctionsdefined\n"CLI=trueifCLIdeftest_printprint"CommandLineVersion\n"endelsedeftest_printprint"ReleaseVersion\n"endendtest_print()这导致:TestingnestedfunctionsdefinedCommandLin
是否可以在应用程序中包含的gem代码中知道应用程序的Rails文件系统根目录?这是gem来源的示例:moduleMyGemdefself.included(base)putsRails.root#returnnilendendActionController::Base.send:include,MyGem谢谢,抱歉我的英语不好 最佳答案 我发现解决类似问题的解决方案是使用railtie初始化程序包含我的模块。所以,在你的/lib/mygem/railtie.rbmoduleMyGemclassRailtie使用此代码,您的模块将在
无论您是想搭建桌面端、WEB端或者移动端APP应用,HOOPSPlatform组件都可以为您提供弹性的3D集成架构,同时,由工业领域3D技术专家组成的HOOPS技术团队也能为您提供技术支持服务。如果您的客户期望有一种在多个平台(桌面/WEB/APP,而且某些客户端是“瘦”客户端)快速、方便地将数据接入到3D应用系统的解决方案,并且当访问数据时,在各个平台上的性能和用户体验保持一致,HOOPSPlatform将帮助您完成。利用HOOPSPlatform,您可以开发在任何环境下的3D基础应用架构。HOOPSPlatform可以帮您打造3D创新型产品,HOOPSSDK包含的技术有:快速且准确的CAD