Javascript AngularJS，指令中的链接函数，单击按钮时如何更新属性？

我对AngularJS是新手，我正在尝试一些东西。有时成功，有时失败。 以下是我正在（未成功）尝试做的事情： 用户点击一个按钮，就会计算出一场足球比赛的随机分数。根据我们团队的胜负，显示的消息会发生变化。这很有效。 但不起作用的是，我希望我的css类也改变。 我试图通过指令中的一个link函数来实现这一点（因为我现在正在学习link和compile函数），但似乎attr在应用程序启动时加载了一次，不能修改。 好的，也许我应该分享我的代码：

1/my index.html中有趣的部分

    <div class="container" ng-controller="ScoreController as score">
        <h4> {{ score.test }} </h4>
        <button class="btn btn-danger" ng-click="score.scoreCalculation();">Check the score</button>
        <div display-result class="grey" result="{{ score.result }}">
           <h4> {{ score.message }} </h4>
        </div>
    </div>

3/我的控制器

function ScoreController () {
    // ctrl = this;
    this.message = "The game is about to start!";
    this.scoreFrance = 0;
    this.scoreArgentine = 0;
    this.test = "France - Argentine";
    // this.result = "";
    this.color = "";
    this.scoreCalculation = () => {
        let France = Math.floor(Math.random() * 4);
        let Argentine = Math.floor(Math.random() * 4);

        if (France > Argentine) {
            this.message = `France Wins! ${France} - ${Argentine}`;
            this.result = "win";
        } else if (France < Argentine) {
            this.message = `France Loses! ${France} - ${Argentine};`
            this.result = "lose";
        } else {
            this.message = `It's a draw! ${France} - ${Argentine}`;
            this.result = "draw";
        };
    };
};

angular
    .module('app')
    .controller('ScoreController', ScoreController);

现在，我希望由于通过

attrs

传递给指令的

result=“{{score.result}}”

，消息的css类将得到更新。但是没有，

attrs.result

保持在我console.log时最初的值

---

如果你知道路，请告诉我，谢谢

link

在每个指令初始化时为其运行一次，在此之后您希望更新类，对于attrs，它是通过观察完成的：

link: function ($scope, $element, $attrs) {
    attrs.$observe('result', (value) => {
        $element.addClass(value);
    });
}

---

非常感谢你，你解决了它！在

add.Class

行之前，我有这样一个问题：

$element.removeClass（“rwin”）$element.removeClass（“lose”）$element.removeClass（“draw”）

否则它会继续将这些类添加到html中，并在某一点上感到困惑，不知道显示哪种颜色。谢谢！

function displayResult () {
    return {
        restrict: 'A',
        link: function ($scope, $element, $attrs) {
            $element.addClass($attrs.result);
        }
    };
};

angular
    .module('app')
    .directive('displayResult', displayResult);

link: function ($scope, $element, $attrs) {
    attrs.$observe('result', (value) => {
        $element.addClass(value);
    });
}