我正在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
答案 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 - 再次,我不想做的事情。 这是角度主要功能之一,你几乎不会把这个片段放到控制器中(如果你想要一个特定的逻辑)并以某种方式将它绑定到至少一个模板(如果你想向用户显示)