您可能对 AngularJS 的工作方式有些困惑——这完全正常,尤其是如果您习惯使用 jQuery 进行 DOM 操作。
AngularJS 没有任何开箱即用的功能来启动模态窗口,我可以看到你正在使用 Bootstrap。
我建议再次查看 AngularJS 官方文档(http://docs.angularjs.org/)并查看主页上的第一个示例以了解它。还要确保访问 Egghead.io ( http://egghead.io/ ) - 那里有非常好的视频教程。
但是为了给你一些帮助,我在这里整理了一个例子,使用 Bootstrap 和 AngularJS 来启动你想要的模式窗口。
你可以看到它在这里工作(http://plnkr.co/edit/fCaNjLwi4RlCw66yKRd7)
基本上,$routeprovider
您的应用程序“指向”要用于特定路线的正确视图和控制器。因此,无论您要加载什么(在本例中为模态窗口),都需要成为视图的一部分。
看看下面的代码:
<!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>
希望有帮助!