我只想在我的popover中显示一些html,但它似乎不起作用。
这是我的控制者:
app.controller('changeColorCtrl', ['$scope', 'TestData', function ($scope, TestData) {
var colorlist = angular.fromJson(TestData);
$scope.changeColor = function (Owner) {
for (i = 0; i < colorlist.length; i++) {
if (colorlist[i].Owner == Owner) {
var colorScore = colorlist[i].Score;
}
}
if (colorScore >= 0 && colorScore <= 4) {
$scope.changeColor = "red";
}
else if (colorScore >= 5 && colorScore <= 8) {
$scope.changeColor = "yellow";
}
else if (colorScore >= 9) {
$scope.changeColor = "green";
}
}
$scope.stringHtml = function (Owner) {
for (i = 0; i < colorlist.length; i++) {
if (colorlist[i].Owner == Owner) {
var colorScore = colorlist[i].Score;
$scope.stringHtml = "My name is: <h1>John Doe</h1>";
return;
}
}
}
}]);
})();
HERE IS MY HTML:
<td>
<b>
<a style="text-decoration:underline;"id="mypopover" ng-hide="workspace.Owner=='NONE'" ng-bind="workspace.Owner"
ng-model="changeColor" ng-class="changeColor" ng-init="changeColor(workspace.Owner)" ng-bind-html="stringHtml(workspace.Owner)"
popover-title="{{stringHtml}}" uib-popover="{{stringHtml}}"
ng-controller="changeColorCtrl" popover-trigger="mouseenter" popover-placement="right">
<i class="fa fa-spinner fa-2x fa-spin" ng-show="workspace.Owner=='NONE'"></i>
<!--uib-popover="{{workspace.Score}}" ng-bind-html="stringHtml" popover-title="Score:{{workspace.Score}} Id:{{workspace.Id}}"-->
</a>
</b>
</td>
我找到了一个解决方案:http://plnkr.co/edit/?p=preview
我在我的代码上进行了这些更改
HTMLPAGE:
<td ng-controller="changeColorCtrl">
<b>
<a style="text-decoration:underline;" ng-hide="workspace.Owner=='NONE'" ng-bind="workspace.Owner"
uib-popover-template="{{stringHtml.templateUrl}}" ng-model="changeColor" ng-class="changeColor" ng-init="changeColor(workspace.Owner)"
popover-trigger="mouseenter" popover-placement="right">
<i class="fa fa-spinner fa-2x fa-spin" ng-show="workspace.Owner=='NONE'"></i>
</a>
</b>
</td>
<script type="text/ng-template" id="myPopoverTemplate.html">
<div>{{stringHtml.content}}</div>
<div class="form-group">
<label>Popup Title:</label>
<input type="text" ng-model="stringHtml.title" class="form-control">
</div>
</script>
ANGULARJS PAGE:
var app = angular.module('Monitor', ['ngRoute', 'smart-table', 'Monitor.Services', 'Monitor.directives', 'ngAnimate','ui.bootstrap', 'angularMoment']);
app.controller('changeColorCtrl', ['$scope', 'TestData', function ($scope, TestData) {
$scope.stringHtml = {
content: 'Hello, World!',
html: true,
templateUrl: 'myPopoverTemplate.html',
title: 'Title'
};
console.log(stringHtml.title);
var colorlist = angular.fromJson(TestData);
$scope.changeColor = function (Owner) {
for (i = 0; i < colorlist.length; i++) {
if (colorlist[i].Owner == Owner) {
var colorScore = colorlist[i].Score;
}
}
if (colorScore >= 0 && colorScore <= 4) {
$scope.changeColor = "red";
}
else if (colorScore >= 5 && colorScore <= 8) {
$scope.changeColor = "yellow";
}
else if (colorScore >= 9) {
$scope.changeColor = "green";
}
}
错误是未捕获错误:[$ injector:unpr]
但我确实注入了所需的服务'ngAnimate'和'ui.bootstrap',但仍然显示相同的错误。请帮我解决这个问题,我对网络开发者更加环保。