ui.bootstrap评级指令似乎没有加载

时间:2014-11-13 11:57:59

标签: angularjs twitter-bootstrap angular-ui-bootstrap

我无法在任何地方看到星级评分输入。它没有加载?我使用指令错了吗?请帮忙。

我已经包含了ui.bootstrao,JQuery,Bootstrapm,并认为该指令应该可以直接使用。

当我在定义ng-app时尝试指定ui.bootstrap时,ng-resource停止工作。

var app = angular.module('mainApp', ['ngResource','ui.bootstrap']);

的test.html:

<!doctype html>
<html data-ng-app="mainApp">
<head>
<title>Test app/title>
<link rel="stylesheet"
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet"
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
</head>
<body role="document">
    <div class="container">
        <div class="page-header">
            <h1>Test</h1>
        </div>
        <div ng-controller="PostIndexCtrl">
            <div class="row">
                <rating value="rate" max="5"></rating>
                <div ng-repeat="item in items">
                    <div class="col-xs-1 col-md-3">
                        {{item.name}} <img class="thumbnail" src="{{item.photo}}" />
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript"
        src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="components/angular-bootstrap/ui-bootstrap.js"></script>
    <script
        src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script
        src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
    <script
        src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-resource.min.js"></script>
    <script src="js/services.js"></script>
</body>
</html>

service.js:

var app = angular.module('mainApp', ['ngResource']);

app.factory("Post", function($resource) {
  return $resource("/api/item");
});

app.controller("PostIndexCtrl", function($scope, Post) {
  Post.get(function(data) {
//    alert(data.items);
      $scope.items = data.items;
  });
});

1 个答案:

答案 0 :(得分:0)

你的html中的这一行似乎不适合我:

<script src="components/angular-bootstrap/ui-bootstrap.js"></script>

使用:

angular-bootstrap/ui-bootstrap-tpls.js

angular-bootstrap/ui-bootstrap-tpls.min.js

而不是简单地使用:

angular-bootstrap/ui-bootstrap.js

,不包含模板。

如果使用凉亭,请安装:

bower install angular-bootstrap

根据您的设置(以及可能的.bowerrc文件),默认情况下,angular-bootstrap目录将放在目录中:

bower_components/angular-bootstrap/   (or perhaps simply components/angular-bootstrap in your config)

您可以在其中找到上述文件。