处理角度UI消息警报的正确方法

Question

一位朋友，我正在讨论处理推送到用户界面的消息的最佳做法

以下是我处理它的方式：

<div class='{{AlertClass}}' ng-show="AlertMessage != null">{{AlertMessage}}</div>

和

record.update($scope.account)
    .$promise
    .then(function (r) {
        $scope.AlertMessage = "Success! Record has been saved."
        $scope.AlertClass = "alert alert-success"
    }, function (r) {
        $scope.AlertMessage = "Error! Something didn't work."
        $scope.AlertClass = "alert alert-error"
    });

使用上述方法，我可以轻松地将外观和消息更改为最终用户

然而，我的朋友坚持认为正确的方法是

<div class='alert' ng-class='{ 'alert-error' : errorExists, 'alert-success' : success }">{{alertMessage}}</div>

两者都有优势吗？感觉我的方法更容易管理，更容易阅读。然而，他的方法使用ng-class

Answer 1

非常肯定它的意见。但我必须同意你的意见，或者至少不是你朋友的态度。为什么？因为它真的使html标记变得混乱。如果一堆html标签填充得如此沉重，那真的会让html的可读性变差。可读性越差，代码维护起来就越难。

再看一遍之后。最好的方法可能是使用受控模板。使用ng-if你可以模板化错误或成功消息。这可以提供更好的可读性，保持简单，没有杂乱。