个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我一直在这里和那里学习一些 Angular ，但我不太明白处理来自服务器的成功/错误响应的 Angular 方式是什么。典型的 jQuery 方法是:
在 Angular 中，我们有操纵 DOM 的指令，我们有处理模型的 Controller 。假设我们有以下内容:
form.html
<div ng-controller="myController">
<span class="hidden success-message"></span>
<form>
<label> Name </label>
<input type="text" name="name" ng-model="name">
<span class="name-error hidden"></span>
<label> Occupation </label>
<input type="text" name="occupation" ng-model="occupation">
<span class="occupation-error hidden"></span>
<input submit-directive type="submit" id="submit" value="Submit">
</form>
</div>
app.js
angular.module('app', []).controller('myController', [$scope, $http, function($scope, $http) {
$scope.name = "";
$scope.occupation = "";
$scope.doSubmit: function(formData) {
$http.post("/save", formData)
.success(function(response) {
$scope.name = response['name']
$scope.occupation = response['occupation']
// How to pass success messages back to directive?
}.fail(function(err) {
// How to pass error messages back to directive?
}
}
});
angular.module('app', []).directive('submit-directive', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
element.click(function() {
// Pass form data back to controller
scope.$apply('doSubmit(\"' + $("form").serialize() +'\")');
});
// How do I get the success/fail results from the Controller so that I can manipulate the DOM?
}
};
});
在这里，用户输入他们的姓名和职业。提交后，指令获取表单数据并将其呈现给 Controller 以进行 POST 请求。返回响应时，指令应显示成功消息或显示错误消息。
我不清楚如何将 Controller 的响应传递给 DOM 操作指令。
我想到的唯一方法是创建一个$watch:
// in controller
$scope.isFormPostSuccess = false;
$scope.formResponse = null;
// ....
.success(function(response) {
$scope.isFormPostSuccess = true;
$scope.formResponse = response;
}.fail(function(err) {
$scope.isFormPostSuccess = false;
$scope.formResponse = err;
}
然后在指令中，我会观察这些变量的变化并采取相应的行动。但是，这种方式感觉非常困惑，而且似乎不能很好地适应较大的应用程序或具有许多独立表单的情况。我也可以将所有 DOM 操作移到 Controller 中，但那是糟糕的设计。
什么是正确的 Angular 方式？
最佳答案
其实，所谓的“Angular way”应该是将models($scope.foo)和directives(like ng-model, ng-bind、ng-show 等，或您的自定义指令)来实现 DOM 操作的目标。它不像在 Controller 中手动启动 DOM 操作，而是在 Controller 中更改模型，DOM 将在指令的帮助下相应地更新自身。
在您的情况下，如果您只想显示成功/错误消息，我认为您不需要使用自定义指令。
首先，您应该将相关的表单字段包装在单个模态对象中，而不是多个模态对象中。喜欢:
<input type="text" name="name" ng-model="person.name">
和
<input type="text" name="occupation" ng-model="person.occupation">
其次，您应该使用 ng-submit 或 ng-click 进行表单提交操作，例如:
<input type="submit" id="submit" value="Submit" ng-click="doSubmit(person)">
或
<form ng-submit="doSubmit(person)">
...
<input type="submit" id="submit" value="Submit">
</form>
第三，您应该使用ng-model 而不是serialize() 从表单中获取数据。就像在 How can I post data as form data instead of a request payload? 中讨论的那样:
$scope.doSubmit = function(formData) { // use `=` instead of `:` here
$http({
method: "POST",
url: "/save",
data: $.param(formData),
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
})
// ...
}
最后，如果你想向用户显示一些文本以外的反馈，你应该使用ng-show、ng-switch、ng- class 或 ng-style 可能的话。喜欢:
<span class="name-error" ng-show="errorMessage.name" ng-bind="errorMessage.name"></span>
并在 fail() 回调中显示名称错误消息时:
errorMessage.name = "Some error message here."; // don't forget to initialize errorMessage to an empty object
就是这样!
更新
对于您在评论中提出的问题，我认为，在 Angular 中，人们可能更喜欢对单个 DOM 元素或嵌套指令使用单独的内聚指令，然后将它们与模型或 Controller (嵌套指令)连接起来。
在您的示例中，我建议您结合使用两者。
首先，为 UI 目的使用一组嵌套指令。您可能有一个指令绑定(bind)到 body 标签并在那里访问视口(viewport)信息。然后您可以使用 require: '^ParentDirective' 在内部指令中访问它。
然后，您可以将模型绑定(bind)到内部指令。因此，您将数据和 UI 操作分开。
例如
<body auto-size-messages>
<div ng-repeat="message in messages" message="message"></div>
</body>
在 auto-size-messages 中，您可以获得视口(viewport)属性并将其分配给 Controller 。而在message中，您可以操作DOM将消息放置在您想要的位置，并根据消息属性显示内容。
您可以引用 https://docs.angularjs.org/guide/directive 中的创建包装其他元素的指令部分对于嵌套指令。
关于javascript - 在 POST 之后处理从 Angular Controller 到指令的成功/错误 DOM 操作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27054523/
25
4
0
我正在努力做到这一点 在我的操作中从数据库获取对象列表(确定) 在 JSP 上打印(确定) 此列表作为 JSP 中的可编辑表出现。我想修改然后将其提交回同一操作以将其保存在我的数据库中(失败。当我使用
我有以下形式的 Linq to Entities 查询: var x = from a in SomeData where ... some conditions ... select
我有以下查询。 var query = Repository.Query() .Where(p => !p.IsDeleted && p.Article.ArticleSections.Cou
我正在编写一个应用程序包，其中包含一个主类，其中主方法与GUI类分开，GUI类包含一个带有jtabbedpane的jframe，它有两个选项卡，第一个选项卡包含一个jtable，称为jtable1，第
以下代码产生错误 The nested query is not supported. Operation1='Case' Operation2='Collect' 问题是我做错了什么？我该如何解决？
我已经为 HA redis 集群(2 个副本、1 个主节点、3 个哨兵)设置了本地 docker 环境。只有哨兵暴露端口(10021、10022、10023)。 我使用的是 stackexchange
我正在 Desk.com 中构建一个“集成 URL”，它使用 Shopify Liquid 模板过滤器语法。对于开始日期为 7 天前而结束日期为现在的查询，此 URL 需要包含“开始日期”和“结束日期
你一定想过。然而情况却不理想，python中只能使用类似于 i++/i--等操作。 python中的自增操作 下面代码几乎是所有程序员在python中进行自增(减)操作的常用
我需要在每个使用 github 操作的手动构建中显示分支。例如:https://gyazo.com/2131bf83b0df1e2157480e5be842d4fb 我应该显示分支而不是一个。 最佳答
我有一个关于 Perl qr 运算符的问题: #!/usr/bin/perl -w &mysplit("a:b:c", /:/); sub mysplit { my($str, $patt
我已经使用 ArgoUML 创建了一个 ERD(实体关系图)，我希望在一个类中创建两个操作，它们都具有 void 返回类型。但是，我只能创建一个返回 void 类型的操作。 例如: 我能够将 book
Github 操作仍处于测试阶段并且很新，但我希望有人可以提供帮助。我认为可以在主分支和拉取请求上运行 github 操作，如下所示: on: pull_request push: b
我正在尝试创建一个 Twilio 工作流来调用电话并记录用户所说的内容。为此，我正在使用 Record，但我不确定要在 action 参数中放置什么。 尽管我知道 Twilio 会发送有关调用该 UR
我不确定这是否可行，但值得一试。我正在使用模板缓冲区来减少使用此算法的延迟渲染器中光体积的过度绘制(当相机位于体积之外时): 使用廉价的着色器，将深度测试设置为 LEQUAL 绘制背面，将它们标记在模
有没有聪明的方法来复制 和 重命名 文件通过 GitHub 操作？ 我想将一些自述文件复制到 /docs文件夹(:= 同一个 repo，不是远程的!)，它们将根据它们的 frontmatter 重命名
我有一个 .csv 文件，其中第一列包含用户名。它们采用 FirstName LastName 的形式。我想获取 FirstName 并将 LastName 的第一个字符添加到它上面，然后删除空格。然
Sitecore 根据 Sitecore 树中定义的项目名称生成 URL， http://samplewebsite/Pages/Sample Page 但我们的客户有兴趣降低所有 URL(页面/示例
我正在尝试进行一些计算，但是一旦我输入金额，它就会完成。我只是希望通过单击按钮而不是自动发生这种情况。 到目前为止我做了什么: Angular JS - programming-fr
我的公司创建了一种在环境之间移动文件的复杂方法，现在我们希望将某些构建的 JS 文件(已转换和缩小)从一个 github 存储库移动到另一个。使用 github 操作可以实现这一点吗？ 最佳答案 最简
在我的代码中，我创建了一个 JSONArray 对象。并向 JSONArray 对象添加了两个 JSONObject。我使用的是 json-simple-1.1.jar。我的代码是 package j
我是一名优秀的程序员,十分优秀！