Angular.js ng-bind-html和popover不能一起工作

时间:2016-03-15 09:33:22

标签: javascript html angularjs twitter-bootstrap ng-bind-html

我只想在我的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}}&nbsp;&nbsp;&nbsp;Id:{{workspace.Id}}"-->
                    </a>
                </b>
</td>

enter image description here

我找到了一个解决方案: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',但仍然显示相同的错误。请帮我解决这个问题,我对网络开发者更加环保。

0 个答案:

没有答案