AngularJS在第一个页面视图上没有加载
AngularJS not loading on first page view
我在轨道4上构建的应用程序中使用AngularJS。我遇到的问题是,当我第一次重定向到一个页面时,它不会加载任何 js。如果我输入特定的URL或刷新页面,那么它可以正常工作。在 chrome 控制台中,我收到错误:
Uncaught Error: No module: angular.js?body=1:1212
这是我的应用程序.js文件:
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require turbolinks
//= require angular
//= require_tree .
var Sampleblog = angular.module('Sampleblog', ['ngResource'])
$(document).on('page:load', function() {
return $('[ng-app]').each(function() {
var module;
module = $(this).attr('ng-app');
return angular.bootstrap(this, [module]);
});
});
相关视图文件:
<h1>Related Tweets</h1>
<div ng-app>
<div ng-controller="TermCtrl">
<span>{{remaining()}} of {{terms.length}} selected</span>
<ul class="unstyled">
<li ng-repeat="term in terms">
<input type="checkbox" ng-model="term.select">
<span class="select-{{term.select}}">{{term.text}}</span>
</li>
</ul>
<form ng-submit="addTerm()">
<input type="text" ng-model="termText" size="30"
placeholder="add new term here">
<input class="btn-primary" type="submit" value="add">
</form>
</div>
</div>
<%= link_to 'Back to Posts', posts_path, type: "button", class: "btn btn-primary" %>
以及相关的.js文件
function TermCtrl($scope) {
$scope.terms = [
{text:'Placeholder1', select:true},
{text:'Placeholder2', select:false}];
$scope.addTerm = function() {
$scope.terms.push({text:$scope.termText, select:false});
$scope.termText = '';
};
$scope.remaining = function() {
var count = 0;
angular.forEach($scope.terms, function(term) {
count += term.select ? 1 : 0;
});
return count;
};
}
TermCtrl.$inject = ['$scope'];
任何帮助将不胜感激!
你只需要告诉angular你想在ng-app
中加载哪个模块:
<div ng-app="Sampleblog">
否则,它不知道您要加载此内容:
angular.module('Sampleblog', ['ngResource'])
相关文章:
- 有没有比在app.js上绑定模块名称更好的方法来动态加载视图模型和视图以显示模态
- 如何使用post和ajax加载视图Codeigniter
- 访问url[材质Ui+选项卡]时,Angular Ui路由器未加载视图
- Codeigniter JQuery在JQuery.get请求后动态加载视图中的数据
- 如何使rails上的所有图像异步加载视图页面
- 动态内容加载视图
- AngularJS:触发从子窗口加载视图(OAuth)
- Ember.选择selectionBinding在加载视图时激发
- 如何在加载视图之前检查JSF资源是否存在
- 加载视图以查看问题 - AngularJS + ui.router
- 如何使用代码点火器根据传递的 ID 在引导模式中加载视图
- 正在加载视图配置
- 如何在 Angular 中的基本 HTML 视图中加载视图
- 带有 AJAX 下拉菜单的代码点火器在form_validation失败并重定向/重新加载视图后不起作用
- 在更改网址上重新加载视图
- 如何在 iframe 中加载视图
- 角度 ui 路由器加载视图两次
- Angular + Laravel:通过ngRoute加载视图
- 动态加载视图,telerik mvc
- 从 ajax 中的 HttpResponse() 加载视图时出现混合内容错误