Bootstrap 和 AngularJS 简单代码

Question

大家好，我有一个使用 Bootstrap 和 AngularJS 的简单代码，但我似乎无法使用它。单击按钮后，它只会显示警报。这是代码：

var myapp = angular.module('myapp',['ui.bootstrap']);

myapp.controller('mainCtrl', ['$scope',mainCtrl]);

function mainCtrl($scope) {
    $scope.testing = function() {
        alert("Button Is Pressed");
    }
}

<!DOCTYPE html>
<html lang="en-US" data-ng-app="myapp">
<head>
<title>Sample Angular JS</title>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<script type='text/javascript' src='https://github.com/angular-ui/bootstrap/blob/gh-pages/ui-bootstrap-0.11.2.min.js'></script>
<script type='text/javascript' src='https://code.angularjs.org/1.3.0-rc.1/angular.min.js'></script>

<script type='text/javascript' src='myapp.js'></script>

</head>

<body data-ng-controller="mainCtrl">

<div class="container">
    <button class="navbar-btn btn-danger btn pull-right" data-ng-click="testing()">Test</button>
</div>

</body>
</html>

我不确定为什么按钮不起作用，可能是因为我正在使用的库？请告知我是 AngularJS 框架的新手。谢谢。

Answer 1

ui-bootstrap requires bootstrap which requires jQuery... 你会得到一个导致无法正常工作的依赖性错误...

Answer 2

您应该在加载需要 angular 对象的 ui-bootstrap 之前加载 angular.js。您可能还需要按照@sahbeewah 的建议添加 jQuery 参考。

Bootstrap 和 AngularJS 简单代码

Bootstrap and AngularJS Simple Code

javascript

angularjs

angular-ui

angular-ui-bootstrap