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

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

我已经编写了一个小的测试应用程序（想象一下类似于yeoman todo应用程序的情况：）。在上述应用程序中，如果用户尝试添加重复条目，我想抛出一个错误

在html文件中，我有一个添加按钮：

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

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

这些都很好用。（这些只是片段）

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

我的问题有点哲学性——如果我在控制器中显示任何内容（比如，

alert（err））；

，我已经违反了

MVC

模型，让控制器直接联系用户-否？这将使控制器与视图/UI耦合-同样，这也是我不想做的事情。是否最好只需从控制器重新抛出错误，然后在html/视图中捕获它？如果是，是否有一个好的方法在一个ang中实现这一点表情？ 想法

我使用下面的一个答案进行了更深入的研究，发现了以下链接： 也许可以试试这个插件：

---

我想有多种方法可以实现这一点，其中一种可能是在$scope.addPerson范围之上定义一个变量/对象，例如hasError和$watch it。下面给出了实现这一点的基本方法：

另一种方法是使用broadcast/emit&on，对于这个特殊的问题，我建议使用$watch，因为emit/broadcast将在$scope上或向下“触发”事件。 也许能帮你

非常基本的例子：

$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的主要功能之一，你几乎不会因为把这一块放到一个控制器（如果你想在它后面有一个特定的逻辑）并以某种方式将它绑定到至少一个模板（如果你想向用户展示它）而感到骄傲.

MVC在我看来并不是一个严格的规则，它只是一个关于分离关注点的建议或指导原则。你不必太担心

违反MVC模型。

。对我来说，我使用通知服务，它使用一些js插件显示dom通知。我将插件的功能包装在我的服务中，然后使用我的服务nside控制器。这样我可以很容易地用另一个插件替换插件。希望这有帮助。手表代码放在哪里？我能想到的唯一“高于”控制器代码的地方是主应用程序代码…所做的就是配置依赖项和路由。如果我把它放在控制器中，我也会遇到同样的问题Ginaly（直接向用户显示内容的控制器）。我不确定是否100%得到了您的支持，但如果您根本不希望它出现在这个控制器中，您可以尝试注入$rootScope，并从那里向子控制器广播，其中一个子控制器必须是所需的用户控制器（如果您希望在那里完全分离）。然而，要实现“angularway”，你需要一个子-父关系，例如控制器。你有两个官方选择，共享服务和事件，你也可以在服务上$watch和$broadcast来“组合”两者。我想，也许我没有解释我自己。我不希望控制器与UI耦合。因此，我不想我的理解是，对于MVC模型，我应该让控制器更改模型（类似于“警报状态”），并让视图拾取所述更改。我不确定如何执行此操作——同样，在不将UI与控制器或模型耦合的情况下。

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';
    }
};

$scope.hasError = '';

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


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