AngularJS，指令中的Link函数，如何在单击按钮时更新attrs？

问题描述

我是AngularJS的新手，正在尝试一些东西。有时成功，有时不成功。 这是我（未成功）尝试执行的操作： 用户单击按钮，并计算出足球比赛的随机分数。根据我们的团队是赢还是输，显示的消息会改变。这有效。 但是不起作用的是我也希望更改CSS类。 我正在尝试通过指令中的链接函数来执行此操作（因为我现在正在学习链接和编译函数），但看来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);

现在，我希望借助result="{{ score.result }}"传递给指令的attrs，可以更新消息的css类。但是没有， attrs.result保持在我进行控制台登录时的初始值。

让我知道您是否知道解决方法，谢谢！

解决方法

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

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