复制UI-Bootstrap代码不行？如何使用UI-Bootstrap？

Question

我正在尝试使用 http://angular-ui.github.io/bootstrap/ 页面中的组件，基本上是完全复制代码以获取框架。但它似乎不起作用，我是否遗漏了一些一般性的东西？

这是完全相同的代码，据我所知我已经添加了依赖项，这是另一个类似 post.

中的错误

例如对于轮播 (ui.bootstrap.carousel)，我将可用的 html 代码复制到 html 文件中 index.html:

<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.3.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div ng-controller="CarouselDemoCtrl">
<div style="height: 305px">
<div uib-carousel active="active" interval="myInterval" no-wrap="noWrapSlides">
  <div uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id">
    <img ng-src="{{slide.image}}" style="margin:auto;">
    <div class="carousel-caption">
      <h4>Slide {{slide.id}}</h4>
      <p>{{slide.text}}</p>
    </div>
  </div>
</div>
</div>
<div class="row">
<div class="col-md-6">
  <button type="button" class="btn btn-info" ng-click="addSlide()">Add Slide</button>
  <button type="button" class="btn btn-info" ng-click="randomize()">Randomize slides</button>
  <div class="checkbox">
    <label>
      <input type="checkbox" ng-model="noWrapSlides">
      Disable Slide Looping
    </label>
  </div>
</div>
<div class="col-md-6">
  Interval, in milliseconds: <input type="number" class="form-control" ng-model="myInterval">
  <br />Enter a negative number or 0 to stop the interval.
</div>
</div>
</div>
</body>
</html>

我把js代码复制到一个叫example.js的js文件中：

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('CarouselDemoCtrl', function ($scope) {
$scope.myInterval = 5000;
$scope.noWrapSlides = false;
$scope.active = 0;
var slides = $scope.slides = [];
var currIndex = 0;

$scope.addSlide = function() {
var newWidth = 600 + slides.length + 1;
slides.push({
  image: '//unsplash.it/' + newWidth + '/300',
  text: ['Nice image','Awesome photograph','That is so cool','I love that'][slides.length % 4],
  id: currIndex++
});
};

$scope.randomize = function() {
var indexes = generateIndexesArray();
assignNewIndexesToSlides(indexes);
};

for (var i = 0; i < 4; i++) {
$scope.addSlide();
}

// Randomize logic below

function assignNewIndexesToSlides(indexes) {
for (var i = 0, l = slides.length; i < l; i++) {
  slides[i].id = indexes.pop();
}
}

function generateIndexesArray() {
var indexes = [];
for (var i = 0; i < currIndex; ++i) {
  indexes[i] = i;
}
return shuffle(indexes);
}

// 
function shuffle(array) {
var tmp, current, top = array.length;

if (top) {
  while (--top) {
    current = Math.floor(Math.random() * (top + 1));
    tmp = array[current];
    array[current] = array[top];
    array[top] = tmp;
  }
 }

return array;
}
});

为了更好的可读性，您还可以在此处找到代码：https://plnkr.co/edit/YZULMBb0br4IuhV4dUug?p=preview

当我运行它时，它只在页面上显示：

幻灯片{{slide.id}}

为什么？

Answer 1

尝试，在链接前添加 http:，plunker 会直接加载这些引用，但是当您直接在浏览器中加载 url 时，它不会工作。

有时不一定，因为如果用户不直接指定它，几乎所有浏览器都将其作为默认协议

您需要添加http:

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script> 
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.3.0.js"></script> 
<script src="example.js"></script> 
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

复制UI-Bootstrap代码不行？如何使用UI-Bootstrap？

Copying the UI-Bootstrap code does not work? How do I use UI-Bootstrap?

html

javascript

carousel

angularjs

angular-ui-bootstrap