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

时间:2015-05-25 10:38:31

标签: javascript angularjs model-view-controller

我正在Angular的帮助下编写单页应用程序。我以前的经验只是在JavaScript中没有严格的测试或坚持模型。

我写了一个小测试应用程序(想象一下像yeoman todo应用程序: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';
    }
};

这一切都很好,花花公子。 (这些只是片段)

我被教会抛出错误并优雅地抓住并处理它们。在这种情况下,我想通知用户他们试图添加副本。

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

我看得更深,使用下面的答案之一,并找到以下链接信息: UI Notifications with angular js  并可能尝试这个角度通知插件: https://github.com/Swimlane/angular-notifications

1 个答案:

答案 0 :(得分:2)

我想有多种方法可以实现这一点,一种方法是定义一个高于$ scope.addPerson范围的变量/对象,例如: hasError和$ watch it。这里给出了一个基本的方法:$watch (2nd post)

另一种方法可能是使用broadcast / emit&amp;对于这个特殊问题的地方,我建议使用$ watch,因为emit / broadcast会向$或者向上或者向上“触发”$ 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 - 再次,我不想做的事情。 这是角度主要功能之一,你几乎不会把这个片段放到控制器中(如果你想要一个特定的逻辑)并以某种方式将它绑定到至少一个模板(如果你想向用户显示)