在页面更改时控制ngview外部的html
在页面更改时控制ng-view外部的HTML，可以通过使用AngularJS的路由机制来实现。AngularJS是一个流行的前端开发框架，它提供了ng-view指令用于动态加载不同的视图。
具体实现步骤如下：
- 首先，在HTML文件中引入AngularJS库和相关的路由库。可以使用CDN链接或者本地引入。
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.2/angular-route.min.js"></script>- 在AngularJS应用程序的主模块中定义路由配置。可以使用config方法来配置路由。
var app = angular.module('myApp', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/home', {
templateUrl: 'views/home.html',
controller: 'HomeController'
})
.when('/about', {
templateUrl: 'views/about.html',
controller: 'AboutController'
})
.otherwise({
redirectTo: '/home'
});
});在上述代码中，我们定义了两个路由：'/home'和'/about'，分别对应着home.html和about.html这两个视图文件。同时，我们还指定了每个视图对应的控制器。
- 创建相应的视图文件。在views文件夹下创建home.html和about.html文件，并编写相应的HTML代码。
- 创建对应的控制器。在AngularJS应用程序的控制器中，编写处理每个视图逻辑的代码。
app.controller('HomeController', function($scope) {
// 控制器逻辑
});
app.controller('AboutController', function($scope) {
// 控制器逻辑
});- 在HTML文件中使用ng-view指令来标记动态加载的视图位置。
<div ng-app="myApp">
<div ng-view></div>
</div>通过以上步骤，当页面更改时，ng-view指令会根据路由配置动态加载对应的视图文件，并将其内容显示在ng-view标记的位置。
这种方式可以实现单页面应用程序的路由控制，使得在页面更改时能够控制ng-view外部的HTML内容的变化。同时，这种方式也提供了更好的用户体验和代码组织结构。
相关·内容
如何将我的控制器的加载延迟到在AngularJS中加载了HTML页面？我用的是旋转器。我的代码如下所示
<span spinner-key="spinner-mySpinner">
<div>...</div>
</span>
在调用加载数据的承诺之前，我要先调用spinner。
...
mySpinner.spin('spinner-mySpinner');
loadDataPromise = file.getFileDetails(vm.id, vm.path);
...
loadDataPromise.fin
浏览 0提问于2015-11-19得票数 1
回答已采纳
您可以告诉一个角指令，它需要一个特定的指令控制器才能使用：
function SomeDirective() {
return {
require: "someOther",
link: function (scope, elem, attrs, someOtherCtrl) {
someOtherCtrl.doSomething();
}
};
}
function SomeOtherDirective() {
return {
controller: "
浏览 0提问于2016-06-20得票数 1
回答已采纳
如果我使用
NGViewController *ngView = [[NGViewController alloc]initWithNibName:Nil bundle:Nil];
[self presentViewController:ngView animated:NO completion:nil];
上面的代码控制器将转到NGViewController页面。
但如果我用这个导航控制器
NGViewController *ngView = [[NGViewController alloc]initWithNibName:Nil bundle:Nil];
[self.navigatio
浏览 4提问于2013-05-23得票数 4
2回答
我有一个问题，我将继续解释。在html页面顶部使用ControllerAS时，如下所示：
<div ng-controller="MyController as myControllerVM">
我可以使用myControllerVM名称来引用控制器中的内容。
在我的控制器中，我设置了一个变量this并将其他变量分配给它，如下所示：
var vm = this;
vm.number = 1;
然后，我可以引用html中的这个变量，如下所示：
myControllerVM.number
只要在我的页面顶部
<div ng-controller="M
浏览 3提问于2015-04-02得票数 1
回答已采纳
我不需要使用ngView，但是我需要知道控制器中的路由参数。因此，我试图在我的控制器中注入$routeParams。但是，它不起作用，我在HTML中声明了一个ngView。那么，为什么配置$routeProvider需要在ngView中声明一个ngView(实际上这不是我的需求所需要的)？
代码示例:角应用程序
var routeParamsApp = angular.module('routeParamsApp', ['ngRoute']);
配置文件
routeParamsApp.config(['$routeProvider', funct
浏览 2提问于2013-11-17得票数 1
回答已采纳
在阅读了angular ngViewSpec.js文件之后，我终于明白了如何使用路由、控制器和表单来测试我的控制器。这是我的单元测试：
describe("mainControllerSpec", function() {
var element;
beforeEach(module("nisArch"));
beforeEach(module("ngRoute"));
it("clickSearch should change location with limitResults true",
浏览 1提问于2015-11-27得票数 1
我现在正在学习Angular，我正在通过编写一个简单的应用程序来练习，该应用程序使用基于的ngRoute。
<-- index.html -->
<html>
<head> ... </head>
<body>
<div ng-view></div>
</body>
</html>
示例中的代码显示了有关各种"Javascript项目“的信息。我的问题是，如何创建另一个显示此模型信息的视图？
例如，假设我想在页面下方再创建一个ngView，
浏览 1提问于2013-12-06得票数 0
请有人澄清一下AngularJS控制器的生命周期是什么？
控制器是单例的，还是按需创建/销毁的？
如果是后者，是什么触发了控制器的创建/破坏？
考虑下面的例子：
var demoApp = angular.module('demo')
.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/home', {templateUrl: '/home.html', controller: 'HomeCtrl&
浏览 4提问于2013-04-18得票数 203
回答已采纳
指令
app.directive('PanelbarDirective', function ($http) {
return {
restrict: "EA",
templateUrl: 'ngview/shared/panelbar.html'
};
});
testcontroller.js
'use strict';
app.controller('testcontroller', ['$scope',
function testcontro
浏览 1提问于2015-02-13得票数 1
2回答
目前正在从事AngularJs项目
我有两个文件夹
一个是索引文件夹，这个文件夹有一个带有4个菜单的索引页，
索引页代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Learn AngularJS - Inline Editor</title>
<link href="http://fonts.googleapis.com/css?family=Open+
浏览 5提问于2013-10-08得票数 0
回答已采纳
我有一个模块，可以在两种模式下运行。一个是标准的，你可以像往常一样浏览路线，第二个是一个独立的版本，位于另一个页面的侧边栏中。自包含版本的行为应该完全相同，但不会影响url栏。
我可以在不更改url的情况下将路由引入ngview元素吗？
或
手动将模板获取到ngview元素并实例化其关联的控制器？
浏览 2提问于2015-06-03得票数 2
我有一个单页面应用程序，它使用ngRoute在ng-view上更改页面。切换效果很好。我遇到了一个问题，ngview显示的其中一个html页面有一个ngRepeat表。在读了几篇文章后，我注意到ngrepeat不能在ngview中使用。有什么解决方法吗？
Index.html(母版页)
...
<div id="main" class="container">
<div ng-view></div>
</div>
...
EventList.html (由ng-view显示)
<div id="
浏览 0提问于2016-04-04得票数 0
使用ng-controller="myController"，您可以确切地知道哪些DOM元素与控制器相关联，因为它直接放在您的HTML中：
<div ng-controller="myController">
对于$routeProvider，我不知道哪些DOM元素与控制器相关联。控制器是否被注入DOM的最上面的元素？根据文档，控制器是一个JavaScript构造函数，控制器与新创建的作用域相关联。但我不知道新创建的范围在哪里？
控制器仅仅是$routeProvider的一部分，而$routeProvider是对象吗？
浏览 2提问于2014-07-30得票数 1
回答已采纳
2回答
我的应用程序由以下部分组成：
一个索引视图，我的导航栏和一个搜索框放在一起，它有一个导航控制器。两个html页面，放置在一个带有两个不同控制器的ngview元素中。customercontroller和contactscontroller。这两个页面包含从服务获取数据的表。
如何将来自navbarcontroller的值传递给其他两个控制器以筛选我的表？Ng-View不嵌套在navController作用域中。
这是我的路线。
app.config(function ($routeProvider) {
$routeProvider
.when("/Customers"
浏览 1提问于2015-08-03得票数 0
1回答
我正在为一个表单做localStorage，我找到了，它完成了我想做的几乎所有事情。当我在一个页面上尝试它时，form.html是通过ngView (标准角度路由)加载的，它不起作用，然后我采取了相同的形式，将它直接放在我的默认页面index.html下面，它工作得很好。
是什么原因导致SisyphusJS不获取通过ngView加载的任何表单？
如果通过ngView：views/form.html加载了HTML页面，则无法工作
HTML:
<form id="myForm" method="post" name="myForm">
浏览 1提问于2014-02-28得票数 0
回答已采纳
当我直接进入代码时，我的问题最好得到解释。
HTML部件：
<div class="panel panel-default post" ng-repeat="post in posts">
<div class="panel-body">
<div class="row">
<div class="col-sm-2">
<a class="post-avatar thumbnail" href="/
浏览 4提问于2016-11-03得票数 0
回答已采纳
我正在使用创建和管理页面。我用的是角度。
如果我使用ngview和ngview，问题包括css和一些js不能正常工作。特别是在css中，如果我们使用这些指令，css中的父子关系就会中断。
示例：body> .classname中断，因为主体在ngview之外，类在ngview中。有什么解决办法吗？
我不能花时间来构建我自己的模板。
例如，这里是一个结构。
浏览 3提问于2014-10-29得票数 1
回答已采纳
1回答
我试图利用角度转换来进行本地化，但是我遇到了一个问题，它只在主页上工作。单击链接后，下一页根本不会翻译。
奇怪的是，导航条翻译(位于index.html上)仍然正确翻译，但ngview中的内容没有翻译。另一个页面的控制器当前为空。
-App.js
var myApp = angular.module('myApp', ['ngRoute', 'pascalprecht.translate']);
myApp.config(
function ($routeProvider) {
$routeProvider.
when(&
浏览 8提问于2015-08-19得票数 0
回答已采纳
在我的应用程序中的多个路线之间导航时，我在angularJS中使用document.ready遇到了问题。它只在我使用ctrl+f5 (页面重载)时才起作用；似乎在页面之间导航并不会将文档的状态更改为ready。
控制器
angular.element(document).ready(function() {
window.scrollTo(0,90);
});
主html文件
<!DOCTYPE html >
<html ng-app="myApp">
<head>
<meta http-equiv
浏览 52提问于2013-07-30得票数 21
回答已采纳
1回答
页面角跃迁
、、、、
我正在构建一个带有角度的移动应用程序，我试图在切换视图时实现页面转换。
我知道他们用1.1.4发布了动画，但这在视图之间也有效吗？但是，我不使用角度路由，我认为这会使事情变得更棘手。我正在用Razor构建ASP.NET MVC并打印出我们需要的东西。
<!doctype html>
<html>
<head>
//Normal head-stuff
</head>
<body>
<div class="main"&g
浏览 2提问于2013-04-23得票数 1
1回答
ng-动画不触发动画
、、、
在我的angular js站点上，我已经加载并部署了angular-animate (在检查器中，我在js文件夹中看到了angular-animate.js，所以我知道它正在加载。我想做的是让我的页眉在页面加载时动态显示，所以我在我的项目中添加了以下内容
template.html
<header id="header" ng-animate=" 'animate' ">
</header>
style.css
.animate-enter {
-webkit-transition: 1s linear all;
浏览 0提问于2014-11-05得票数 0
1回答
我有基于$routeProvider中路由更改的ng视图部分更新。
anmSite.config(function($routeProvider, $locationProvider){
$locationProvider.html5Mode(true);
$routeProvider
//Route for home page
.when("/", {
templateUrl: "templates/main.html",
controller: "imageController",
浏览 3提问于2016-06-06得票数 2
回答已采纳
我正在构建一个简单的仪表板，其中我有多个视图。我想设置一个刷新时间-大约60秒-自动刷新用户选择的视图。
下面是我的一个应用程序块：
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "dashHome.html"
})
.when("/OverallView",
浏览 5提问于2017-07-21得票数 0
回答已采纳
我在我的index.html里有这个：
<div class="content">
<div data-ng-include="'views/title.html'"></div>
<div data-ng-view=""></div>
</div>
<div data-ng-include="'views/chat.html'"></div>
每
浏览 4提问于2014-02-21得票数 0
回答已采纳
1回答
嘿，伙计们，我一直在尝试使用路由，虽然对angular来说还是个新手:(我已经创建了第一个页面，但我正在尝试当你点击enter时，下一个页面会出现在当前页面的顶部(所以基本上是一个新页面)。我希望它全部是1页的原因是这样我就可以将数据从第一页转移到第二页，但是我似乎不能让它加载下一页……到目前为止，这是我的html和js，不确定我哪里错了-_-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Do
浏览 4提问于2016-08-11得票数 1
回答已采纳
2回答
从指令中提示引起控制器的一种方法。指令
app.directive('scroll', function($location){
return{
restrict: 'A',
link: function(scope, element, attrs){
element.on('scroll', function(){
let fh = $('#ngview').height();
let nh = Mat
浏览 2提问于2018-02-14得票数 0
1回答
如何收听角js中的dom准备事件
、、、、
这就是我的例子
css：
.header{
background:#f00;
height: 40px;
position: fixed;
width: 100%;
}
html,body{
height:100%;
margin:0;
}
.footer{
background:#00f;
height:40px;
}
.main{
padding-top:40px;
min-height:calc(100% - 80px);
}
.main-section{
height:100%;
background:#fF0;
}
.fit-pare
浏览 3提问于2015-02-12得票数 2
回答已采纳
我不能实现我的单一页面。我想添加模板页面，而不重定向到新页面。我的index.html文件：
<!doctype html>
<html lang="en" ng-app="MyApp">
<head>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-
浏览 0提问于2014-12-09得票数 0
在使用ngRoute时，我希望进行角度配置，以便将ng视图的当前内容保留为当前路由的内容，并允许用户导航到不同的路由，然后呈现各自的模板：
<ul class="menu">
<li><a href="#/view1">view1</a></li>
<li><a href="#/view2">view2</a></li>
</ul>
<div ng-view>
<ul>
<
浏览 4提问于2014-09-29得票数 3
我的示例应用程序有两个MVC控制器1、1.HomeController 2、2.DetailsController
HomeController.cs
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
}
Home -> Index.cshtml
<div>
Home - Index
</div>
DetailsController.cs
浏览 3提问于2016-11-23得票数 0
回答已采纳
我试图通过使用Google Chrome的devtools来放松我的生活，当我试图在飞行中修改页面的javascript时，它似乎表现得出乎意料
我有这个函数，它被调用到游戏的每一帧
View.prototype.onHit = function() {
for(var i = 0; i < this.obstacles.length; i++) {
if(this.obstacles[i].dealsDamage) {
//deal damage
} else {
//do something el
浏览 0提问于2013-06-16得票数 0
回答已采纳
1回答
可以在不映射到任何控制器或模板的情况下使用when()吗？
我就是这样配置我的路由的：
app.config(function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when('/presentations/:id', {});
});
我需要在我的控制器中使用routeParams：
app.controller('PresentationController', function($scope, $rout
浏览 1提问于2013-11-24得票数 3
回答已采纳
3回答
我正在为我的网站创建一个打印页面：
当页面加载后，我想启动window.print()。我尝试过不同的方法，但没有成功。我知道这是可能的，因为我可以监听已完成的Ajax调用，但是它是如何以角的方式完成的呢？
我的信息路径:HTML->角->php->mysql表->php->json->角->HTML
浏览 5提问于2014-09-06得票数 4
回答已采纳
当IE10中的css规则在ngView包含的页面中时，我有问题(我使用的是角1.0.6)。它适用于其他浏览器(我认为它适用于IE11，并没有对自己进行测试)：
我有这样的css：
.checker {
display: none;
}
@media (min-width: 1041px) {
.m1 { display: block; }
}
@media (min-width: 980px) and (max-width: 1040px) {
.m2 { display: block; }
}
@media (max-width: 767px) {
.m3
浏览 3提问于2014-05-13得票数 0
回答已采纳
2回答
重置角页
、、、
我有一个按钮在我的角度页，我希望能够重新设置页面。所谓重置，我的意思是将页面恢复到原来的状态，就好像用户刚刚第一次访问了页面一样。我正考虑走复制路线，所以我尝试了这样的方法：
$scope.orig = angular.copy($rootScope);
但这让大吃一惊。我有几个作用域变量和许多控制器变量。我不想单独拯救他们。我认为在原始状态下复制页面会更容易，然后通过检索原始版本来重新设置页面。但这似乎不是一个可行的解决方案。有什么办法解决这个问题吗？
编辑1:，我尝试了Ben的解决方案，但没有成功。这是我的控制器代码：
var app = angular.module('myApp
浏览 5提问于2016-05-05得票数 4
回答已采纳
我一直在查看多个教程和其他堆栈溢出帖子，但我的app.js $routeProvider没有成功。下面是指向项目的github链接
这是我的app.js代码
var app = angular.module('se165PetPinterestWebApp', [
'ngAnimate',
'ngCookies',
'ngRoute'
]);
app.config(['$routeProvider', function($routeProvider){
$rou
浏览 3提问于2014-10-08得票数 0
回答已采纳
2回答
因此，我有一个控制器和一个提供者，我试图将一个值从提供程序传递给控制器，没有太复杂。我已经经历过几次关于这方面的but和论坛线程，但是e=suggestions之外的内容都是有效的。最糟糕的是，我在我的控制台也没有任何错误，只是一个空白页。我确信，这是愚蠢的，小的，我错过了，但我是困惑。
var app = angular.module('myApp', ['ngRoute']);
app.controller('SettingsCtrl', function($scope, Stocks) {
$scope.sto
浏览 1提问于2014-01-30得票数 0
回答已采纳
我目前正在使用作为一个无头浏览器来呈现请求。我使用端点render.html和js_source，它允许在页面上下文中、页面加载完成后和页面呈现之前评估自定义Javascript代码。
我需要对外部资源提出额外的请求，例如在加载页面后加载jQuery。
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = "https://code.jquery.com/jquery-1.5.1.min.js";
document.
浏览 9提问于2016-12-06得票数 0
1回答
我有一个用AngularJS编写的单页应用程序。我需要在那里放置一个UI5文本字段(为了测试目的)，这是我与声明性支持一起使用的。
我有两个档案：
index.html
sap.html。
在我的index.html中，我有<div class="mainView" ng-view></div>，在那里，我将sap.html注入index.html。
当我在我的index.html中写这一行时，我看到sap文本字段：
<div data-sap-ui-type='sap.ui.commons.TextField' i
浏览 0提问于2016-11-07得票数 0
回答已采纳
3回答
我有一个包含两个控制器的页面:一个是管理所谓的‘app’列表，另一个是将新的Angular模板放入它的Div元素的innerHTML中。
<div ng-controller="appList"></div>
<div ng-controller="appPane"> Dynamic content should be loaded here! </div>
我尝试过使用标准的{{expression}}绑定，但它们不适用于html，我还尝试了ng-bind-html-unsafe指令(将innerhtml绑定到A
浏览 0提问于2012-07-04得票数 16
回答已采纳
我用一个简单的响应式caroussel创建了一个小示例，它的工作方式与预期一致。
<body>
<div class="wrap">
<header>header</header>
<div class="main">
<div class="container fill" style="padding: 0px;">
<div id="myCarousel" class="
浏览 5提问于2016-01-01得票数 0
我对app.run()有个问题。在主页中，app.run()正在工作。当我单击菜单按钮时，事件和页面中的events.html app.run()不起作用。但是当我重新加载这个页面时，app.run()是工作的。该怎么办呢。页面main.html和events.html在ngView中，菜单也在ngView中。
controller.js
afroEarthApp.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/',{
tem
浏览 2提问于2016-04-07得票数 1
1回答
从angularjs控制器更改DOM不是一个好的做法。在我的应用程序中，单击链接后，我在ngView中更改了html元素的类。预期的行为是，我有三个div，如果中间的一个显示或不显示，我将更改。我在一个控制器上做这件事。我读过，做DOM操作应该在指令中完成，但我的思维还不够宽广，无法找到解决方案。如果你有什么建议，我很乐意。
浏览 0提问于2013-04-18得票数 8
回答已采纳
正如标题所示，我在ng-view中使用父自定义指令(它定义了一个控制器)得到这个错误，它将内容替换为包含子自定义指令(它需要父控制器)和ng-repeat的模板。
我创建了来说明我的问题：
主模板：
<div class="ng-view">
<div data-my-parent></div>
</div>
路由：
$routeProvider.when( '/', {
template: '<span>View loaded.</span>',
浏览 2提问于2014-07-07得票数 2
我在AngularJS的视图(部分)中有以下代码
<%@ page
pageEncoding="UTF-8"%>
<p>
some text
</p>
<script>
$(document).ready(function(){ alert("WORKS"); })
</script>
我需要它在这里，而不是在控制器，因为稍后我想实现谷歌地图。但是，不会触发警报。可能的原因是什么？
输出HTML中的相对部分
<div id="partials"&g
浏览 1提问于2017-06-14得票数 0
回答已采纳
2回答
我在我的网站上有一些详细的内容页面，我不能完全控制显示在某个div中的html内容。现在，当外部资源的内容包含无效的html时，就像没有结尾一样，我在右栏的导航也是斜体的。我不想使用iframes，比如ebay，也许还有其他方法可以解决这个问题。希望能有一个答案。
<html>
<body>
<div id="page">
<div id="content">[content of external resource]</div>
<div id="right-bar">[M
浏览 0提问于2011-09-30得票数 1
我试着用rails做一个简单的角度应用程序。由于某种原因，当我查看检查器时，我的<div ng-view></div> html标记显示为<!-- ngView: -->。控制台里没有任何错误。我刚认识安古拉杰，我不知道为什么会发生这种事。下面是我的代码，希望我已经包含了给你一个想法的一切。我使用的‘角-rails-模板’创业板，这允许我添加我的html模板在角的模板缓存。
application.html.haml
!!! 5
%html{'ng-app'=>'AD'}
%head
= styleshee
浏览 3提问于2014-03-26得票数 3
回答已采纳
2回答
我试图在自定义指令中使用ng-view，但它不起作用，也没有给我任何控制台错误。
这是我的指示：
(function() {
'use strict';
angular
.module('app')
.directive('header', Header);
Header.$inject = ['USER_AGENT'];
function Header(USER_AGENT) {
return {
restrict: &
浏览 1提问于2015-04-09得票数 0
回答已采纳
1回答
如你所知，是官方的Angular教程。我很好，但是在完成它之后，我仍然没有得到我的问题的答案，为什么当你从一个页面移动到另一个页面时，它会重新下载所有的资源…
我假设它在每次被请求时都会重新渲染和重新注入模板，但我相信肯定有办法缓存所有你已经知道不会改变的信息。我想使用下载的页面，这样如果它是第二次被请求，没有请求去服务器，并从缓存中更新视图。
Angular是否为此提供了功能，或者我应该自己实现它？
致以问候。
浏览 5提问于2013-07-23得票数 0
回答已采纳
因此，我可以通过猫鼬护照显示用户名-本地的成功重定向：
app.get('/profile', isLoggedIn, function (req, res) {
res.render('profile.html', {
user: req.user
});
console.log(req.user.local.username) //correct username for the session
});
然后，...and使用它在profile.html中显示：
<p><%= user.local.u
浏览 4提问于2014-02-01得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
