Question

我正在尝试制作我的第一个angularjs应用程序，但我遇到了一些麻烦。我正在尝试包含并使用angular的ui-bootstrap。我需要在我制作的模板/指令中使用进度条，但我似乎无法让它工作。

我可以将index.html中的进度条显示出来。但是stats.html里面的那些没有。我很确定我需要告诉我使用ui-bootstrap的指令，但我不知道该怎么做。

提前致谢。

app.js

'use strict';
var player = {
  stats: {
    str: 10,
    int: 15,
    spd: 18
  }
}

var monster = {
  stats: {
    str: 20,
    int: 25,
    spd: 28
  }
}
// Declare app level module which depends on views, and components
var app = angular.module('stabber', ['ngAnimate', 'ui.bootstrap']);
app.directive('statBlock',function() {
      return {
        restrict: 'E',
        scope: false,
        templateUrl: 'wigets/stats.html'
      }
});
app.controller('playerStats', function($scope) {
  $scope.stats=player.stats;
});

app.controller('monsterStats', function($scope) {
  $scope.stats=monster.stats;
});

的index.html

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>My AngularJS App</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="app.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
</head>
<body ng-app="stabber">
    <div class="content">
        <div class="row">
            <div class="col-md-4 statblock"  ng-controller="playerStats">
                <stat-block></stat-block>
            </div>
            <div class="col-md-4">
Picture stuff here <uib-progressbar value="55"></uib-progressbar>
            </div>
            <div class="col-md-4 statblock"  ng-controller="monsterStats">
                <stat-block></stat-block>
            </div>
        </div>
    </div>

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
    <script src="app.js"></script>

</body>
</html>

为stats.html

<table border="1">
    <th colspan="2" >STATS</th>
    <tr>
        <td>STR: {{stats.str}}</td>
        <td>HP</td>
        <td><uib-progressbar value="55"></uib-progressbar></td>
    </tr>
    <tr>
        <td>INT: {{stats.int}}</td>
        <td>MP</td>
        <td><uib-progressbar value="55"></uib-progressbar></td>
    </tr>
    <tr>
        <td>SPD: {{stats.spd}}</td>
    </tr>
</table>

Angularjs在指令中使用angularui

0 个答案: