个人中心
文章发布
退出
作者热门文章
- iOS/Objective-C 元类和类别
- objective-c - -1001 错误，当 NSURLSession 通过 httpproxy 和/etc/hosts
- java - 使用网络类获取 url 地址
- ios - 推送通知中不播放声音
27
4
我在即将变得很棒的(第一个)angular 应用程序中为我的路线使用 $routeProvider。
但是，从主干来看，我似乎无法弄清楚如何打开模式作为对哈希更改的响应。
即:
http://localhost:3000/#/items/1
将打开带有项目模型的 Boostrap 详细信息模式(模板 + Controller )。
这可以用 $routeProvider 方法完成吗:
.when('/items/1', {
templateUrl: 'views/ItemDetails.html',
controller: 'ItemDetailsCtrl'
})
...
帮忙吗？
最佳答案
您可能对 AngularJS 的工作原理感到有点困惑 - 这是完全正常的，尤其是如果您习惯于使用 jQuery 进行 DOM 操作。
AngularJS 没有任何开箱即用的功能来启动模态窗口，我可以看到您正在为此使用 Bootstrap。
我建议再次查看 AngularJS 官方文档 ( http://docs.angularjs.org/ ) 并检查主页上的第一个示例以了解它。还要确保访问 Egghead.io ( http://egghead.io/ ) - 那里有非常好的视频教程。
但为了给您一些帮助，我在这里整理了一个示例，使用 Bootstrap 和 AngularJS 启动您想要的模态窗口。
你可以看到它在这里工作(http://plnkr.co/edit/fCaNjLwi4RlCw66yKRd7)
基本上，$routeprovider 将您的应用程序“指向”正确的 View 和 Controller 以用于特定路线。因此，无论您要加载什么(在本例中为模态窗口)都需要成为 View 的一部分。
看看下面的代码:
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>ItemDetailsCtrl</title>
<link data-require="bootstrap@3.0.0" data-semver="3.0.0" rel="stylesheet" href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" />
<script data-require="jquery@2.0.3" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="bootstrap@3.0.0" data-semver="3.0.0" src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script>
'use strict';
var myApp = angular.module('myApp', []).config(function($routeProvider){
$routeProvider.when('/',
{
templateUrl: 'views/template.html',
controller: 'ItemDetailsCtrl'
});
});
myApp.controller('ItemDetailsCtrl', function(){
});
</script>
<script type="text/ng-template" id="views/template.html">
<!-- Button to trigger modal -->
<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
<!-- Modal -->
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
</script>
</head>
<body ng-controller="ItemDetailsCtrl">
<div ng-view></div>
</body>
</html>
希望对您有所帮助!
关于javascript - AngularJS:如何在 View 上方打开模式作为对哈希更改的响应 (ngView/$routeProvider)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18676196/
27
4
0
当我在各种浏览器或使用节点的本地主机上运行时，我无法在我的 Angular 应用程序的 ng-view 中呈现模板。控制台没有抛出任何错误。我已经阅读了我可以在网上找到的关于这个问题的所有内容，但没有
我有一个div，它是ng-view。 Loading... 我也有一部分。类似这样的事情: 我还有一些 Controller 的代码。 有没有办法将另一个具有单独 Controller
我正在使用模板来构建我的应用程序。基本上只有一个主页，然后我使用 ng-view 通过它加载其他页面。 index.html 中的 href 链接工作正常。但我也希望能够在 js 函数中更改 ng-v
当我从索引访问我的页面并开始浏览时一切正常，但是当我在 / 以外的路线上时例如在 /details/123我刷新页面(我配置了 URL 重写)路由设置不正确。 这意味着，当我从索引正常浏览时检查位
举个例子: 我在 ngView 中有具有以下结构的指令: .directive('features', function() { templateUrl: '.../', link:
当我点击链接加载 ngView 页面时，html 文件不会显示。 我没有通过本地主机运行应用程序，我怀疑这可能是问题所在。我刚刚用 Chrome 打开了 index.html，所以也许 ngRoute
我正在尝试实现一个包含导航栏的页面(http://getbootstrap.com/components/参见导航栏)，并且页面的内容是通过ngView从部分html插入的。但是，当单击下拉菜单时，整
我尝试在自定义指令中使用 ng-view 但它不起作用，而且也没有给我任何控制台错误。 这是我的指令: (function() { 'use strict'; angular
我正在使用 angularjs 和 jquery(用于菜单等)，但我不知道为什么我不能使 jquery(eq.简单的 Accordion 菜单)像 this 那样工作。 ，全部在里面 ，我尝试了所有方
Angular 的初学者，我可能措辞不正确，但我不知道如何描述它。 当像这样发生路由变更时 .when('/manage/users', { templateUrl: 'Angular/man
根据 Angular 1.2 ngView 文档“进入和离开动画同时发生”，因此 ngView 更新过程的延时类似于 add new content > animate entering / leav
这是基本设置，它有一个默认的 noemployee.html 部分:作为 ng-view Index.html 内容: 我的路线提供商:
我正在学习 AngularJS，其中一项作业是这样的: Now, add a new div tag to our index.html with an attribute directive tha
我使用路由将不同的模板加载到 ngView 中。其中一个模板有一个简单的 Controller ，其中包含一组联系人。我在这里尝试做的很简单，只需单击链接 (ngclick) 调用函数并将新对象添加到
这是我当前的设置，每一列都由一个 Controller 表示: [column1] [column2] [column3] 此外，每一列都有一些信息(一个或多个变量和对象)，这些信息在修改后需要传
我有一个基本的 PHP 应用程序，其中用户登录信息存储在 HTTP session 中。该应用程序有一个主模板，比如 index.html，它使用 ngView 切换 subview ，如下所示
当您使用具有 100 个不同 View 的 ngView 时，每个 View 具有不同的范围。 Angular 会自动处理销毁旧模板/作用域还是保留在内存中？在我开始编写自定义代码以减少内存负载之前，
我有一个带有按钮的 HTML 页面，单击该按钮会触发对外部服务的请求。此 post 请求返回一个 HTML 页面。 是否可以用此 HTML 内容替换当前的 ngView？ $scope.clickEv
有没有办法在进入时为 ngView 的每个内容而不是 View(div) 本身设置动画？ 最佳答案 除了使用过渡 API 为动画编写自定义 CSS 之外，没有其他方法可以制作动画，例如(过渡:所有线性
是否可以在不编写 routeProvider 的情况下使用 ng-view，即通过在标记部分中包含路由(我意识到混合逻辑和 View 不是最好的设计，但在这种情况，因为它实际上是一个条件模板)。我的路
我是一名优秀的程序员,十分优秀！