Javascript Angularjs在指令中使用angularui
我正在尝试制作我的第一个angularjs应用程序，我遇到了一些麻烦。我试图包括并使用angular的ui引导。我需要在我制作的模板/指令中添加进度条，但似乎无法使其正常工作 我可以在index.html中显示进度条。但是，stats.html中的那些没有。我非常确定我需要告诉我使用ui引导的指令，但我不确定如何做到这一点 提前谢谢 app.jsJavascript Angularjs在指令中使用angularui,javascript,html,angularjs,Javascript,Html,Angularjs,我正在尝试制作我的第一个angularjs应用程序，我遇到了一些麻烦。我试图包括并使用angular的ui引导。我需要在我制作的模板/指令中添加进度条，但似乎无法使其正常工作 我可以在index.html中显示进度条。但是，stats.html中的那些没有。我非常确定我需要告诉我使用ui引导的指令，但我不确定如何做到这一点 提前谢谢 app.js 'use strict'; var player = { stats: { str: 10, int: 15, spd:
'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;
});
<!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>
我的AngularJS应用程序
这里有图片
<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>
统计数据
STR:{{stats.STR}}
惠普
INT:{{stats.INT}
议员
SPD:{{stats.SPD}