如何通知用户 MVC 模型中的错误？

Question

我正在 Angular 的帮助下编写一个单页应用程序。我以前的经验只是把 JavaScript 混在一起，没有严格的测试或遵守模型。

我编写了一个小型测试应用程序（想象一下类似于 yeoman 待办事项应用程序：http://yeoman.io/codelab.html）。在上述应用中，如果用户尝试添加重复条目，我想抛出一个错误。

所以在 html 文件上我有一个添加按钮：

<button ng-click="addPerson(newPerson)">Add</button>

这会在控制器中运行 addPerson 函数：

$scope.addPerson = function (name) {
        try {
            $scope.awesomePeople = PeopleListService.addPerson(name);
        }
        catch(err) {
            // do something with err
        }
    };

依次在服务/工厂中运行适当的功能（将来会从数据库中获取数据——这对我来说只是一个学习过程）：

fact.getPeople = function () {
    return peopleList;
};

fact.addPerson = function(name) {
    if (peopleList.indexOf(name)===-1) {
        peopleList.push(name);
        return fact.getPeople();
    } else {
        throw 'Name (' + name + ') already in awesomePeople list';
    }
};

这一切都很好而且花花公子。 （这些只是 sn-ps）

我被教导要抛出错误并优雅地捕捉和处理它们。在这种情况下，我想通知用户他们尝试添加副本。

我的问题有点哲学 - 如果我在控制器中显示任何内容（例如，alert(err);，我通过让控制器直接联系用户违反了MVC 模型 - 不？这将耦合控制器到视图/用户界面 - 再次，我不想做的事情。最好简单地从控制器重新抛出错误，然后在 html/视图中捕获它？如果是这样 - 有没有好的方法在角度表达式内？ 想法？

我使用以下答案之一进行了深入研究，发现以下链接提供信息： UI Notifications with angular js 并且可以试试这个角度通知插件： https://github.com/Swimlane/angular-notifications

Answer 1

我想有多种方法可以实现这一点，一种是在 $scope.addPerson 的范围之上定义一个变量/对象，例如hasError 和 $watch 它。此处给出了执行此操作的基本方法：$watch (2nd post)

另一种方法是使用广播/发射 & on，对于这个特殊问题，我建议使用 $watch，因为发射/广播将在 $scope 向下或向上“触发”事件。 This 可能会帮助你。

非常基本的例子：

$scope.hasError = '';

$scope.$watch('hasError', function() {
 /* Yourstuff */
});


$scope.addPerson = function (name) {
        try {
            $scope.awesomePeople = PeopleListService.addPerson(name);
        }
        catch(err) {
            $scope.hasError = err;
        }
    };

你也可以不使用 watch 但 {{hasError || ''}} 来显示错误，如果这个控制器在给定的上下文中可用。

我让控制器直接联系用户违反了 MVC 模型 - 不是吗？ 看起来您正在使用服务，服务旨在启用控制器之间的通信，所以不，使用服务本身创建通信层并不违反 MVC 模型。

这会将控制器耦合到视图/UI - 再说一遍，我不想这样做。 这是 angulars 的主要功能之一，你几乎不会把这块放入控制器中（如果你想要它背后的特定逻辑）并以某种方式将它绑定到至少一个模板（如果你想向用户展示它） .