AngularJS, Link指令中的函数，如何在点击按钮时更新属性？

Question

我是 AngularJS 的新手，我正在尝试一些东西。有时成功，有时不成功。这是我（未成功）尝试做的事情：用户点击一个按钮，并计算出一场足球比赛的随机得分。根据我们的团队是赢还是输，显示的消息会发生变化。这行得通。但不起作用的是我希望我的 css class 也发生变化。我试图通过指令中的 link 函数来做到这一点（因为我现在正在学习 link 和编译函数），但似乎 attrs 在应用程序，并且不可修改。好的，也许我应该分享我的代码：

1/ 我的有趣的部分 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>

2/我的非常简单的css文件

.grey {
    border: solid grey 5px;
    border-radius: 7px;
}

.win {
    border: solid green 5px;
}

.lose {
    border: solid red 5px;
}

.draw {
    border: solid orange 5px;
}

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);

4/我的指令

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

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

现在，我希望多亏了我通过 attrs 传递给我的指令的 result="{{ score.result }}"，我的消息的 css class 将是更新。但是不， attrs.result 保持在我 console.log 时它们最初的值。

如果您知道解决方法，请告诉我，谢谢！

Answer 1

link 在初始化时为每个指令运行一次，这里你想在之后更新 class，对于 attrs，它是用 observe:

完成的

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

AngularJS, Link指令中的函数，如何在点击按钮时更新属性？

AngularJS, Link function in directive, how to update attrs when clicking on a button?

javascript

controller

directive

angularjs