Question

我正在尝试在控制器内部执行一个函数，该控制器使用if else来更改返回值。它一直有效，直到我改变下拉，然后完全停止工作。它似乎没有工作，不确定我做错了什么，或者你不能做这种类型的功能。任何帮助将不胜感激。

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-sanitize.js"></script>

<script>
    var app = angular.module('newApp', ['ngSanitize']);
    app.controller('player1ctrl', function ($scope) {
        $scope.playerName = "Hero";
        $scope.playerCard = "A<br />&spades;";
        $scope.color = function () {
            //return $scope.playerName;
            var arr = $scope.playerCard.split("<br />");
            var rtn = "";
            if (arr[1] == "&spades;" || arr[1] == "&clubs;") {
                return "Black";
            }
            else {
                return "Red";
            }
        };
    });
</script>



<title>test ngbindhtml</title>
<meta charset="utf-8" />
</head>
<body ng-app="newApp">
<div ng-controller="player1ctrl">
    Card selected: <p ng-bind-html="playerCard"></p>
    Suit Color: {{color()}}
    <select name="playerCard" ng-model="playerCard">
        <option value="2&lt;br /&gt; &amp;spades;">2 &spades;</option>
        <option value="3&lt;br /&gt; &amp;spades;">3 &spades;</option>
        <option value="4&lt;br /&gt; &amp;hearts;">4 &hearts;</option>

     </select>
</div>
</body>
</html>

Answer 1

首先 - &spades;中有空格：

if(arr[1] == " &spades;" || arr[1] == " &clubs;")

第二 - 你需要使用：

ng-bind-html-unsafe="playerCard"

在您的模板中或使用trustAsHtml in controller;
Plunker

Answer 2

如果没有＆＃34;信任＆＃34;你就无法绑定HTML字符串。它在Angular中。你的＆＃34; playerCard＆＃34;变量，使用＆lt; br /＆gt;造成了这个问题。您需要将$ sce注入控制器，然后调用trustAsHtml函数：

...
app.controller('player1ctrl', function ($scope, $sce) {
...
$scope.playerCard = $sce.trustAHtml("A<br />&spades;");

这样做可以让你仍然像现在一样使用[正确的] ng-bind-html。您也可以很容易地将其转换为指令。

AngularJS函数if else

2 个答案: