Question

我想重构我在下面发布示例的代码。我是AngularJS的新手。现在，当我看到代码时，我对HTML代码中的所有逻辑非常好奇。

<p ng-show="countForm.count.$dirty && countForm.count.$error.min" class="error-message">

<button ng-click="step(2)" ng-show="data.step == 1 && countForm.count.$dirty" ng-disabled="countForm.$invalid" class="line-break">

<div ng-class="{selected: data.spreadChoice == 3}" ng-click="data.spreadChoice = 3; step(3)" ng-mouseover="data.preSpreadChoice = 3" ng-mouseout="data.preSpreadChoice = data.spreadChoice">

<div ng-show="data.step >= 2" class="step" ng-class="{active: data.step == 3, done: data.step > 3, left: data.preSpreadChoice == 1, right: data.preSpreadChoice == 3}" ng-scroll-here="data.step == 3">

<p ng-switch-when="false" class="large">[[data.emails.length]] von [[data.count]] – <span class="red">[[Math.max(0,data.count-data.emails.length)]]</span> Members</p>

<div ng-show="data.step >= 5 && data.multipleTeams"  class="step" ng-class="{done: data.step > 5, active: data.step == 5}" ng-scroll-here="data.step == 5">

<button class="small" ng-disabled="!unitsForm.$dirty || unitsForm.$invalid" ng-click="addUnit(data.nextTeam, data.nextTeamleaderEmail)">

HTML不应该包含类或属性，而 logic 本身应该放在JS文件或JS代码中吗？这是开发AngularJS的一种好的（或至少是一种常见的）方式吗？或者应该避免在HTML中放置逻辑？

Answer 1

如果你问我：

客户端业务逻辑位于注入指令\控制器的服务中。
假设UI逻辑被放置在控制器中。

现在关于向视图添加逻辑，如果我们讨论的是业务逻辑，那么它就是 big no no 。在控制器上使用一种方法来评估使用该服务的内容。

如果我们在谈论ng-if / ng-show条件，那么只有它们很小并且可读性很好。条件我会将它们添加到视图中。当它不止于此时，我将它们移动到控制器以进行调试问题，因为我认为HTML应该是可读的。

Answer 2

使用angular中的指令将逻辑放在HTML中是一种好方法。如果不在HTML中放置逻辑，则无法充分利用角度。

控制器应该包含视图逻辑，但实际上不应该引用DOM（引用DOM应该只通过指令来完成）。 ^ref

要记住的两件事或AngularJS的最佳实践

将范围视为视图中的只读

将范围视为控制器中的只写权限   ^ref

由于您将逻辑放在HTML中，如果将其视为只读，您可以使用范围内的函数检查条件或提取数据，但无论您在HTML中执行什么操作，原始数据模型都不会受到干扰。

将dom元素绑定到特定指令也是角度最强大的功能。

在jQuery中使用datepicker时，可以执行以下操作：

<div id="datepicker"></div>

然后在JS：

jQuery('#datepicker').datepicker({
    start:'today',
    end:'tomorrow',
    showTime:true
})

您可以按角度方式执行此操作

这种方式即使设计师或阅读HTML的人能够阅读内容，甚至可以从元素的属性本身传递选项。

<div date-picker start="today" end="tomorrow" show-time="true"></div>

AngularJS的重要性本身是声明性语法，可以包含表达式作为您发布的属性值。这根本不是一个坏习惯。实际上，所有开发人员都这样做是很常见的。在angularjs中使用HTML中的逻辑可以节省大量自己编写的代码。所有的重击都是在幕后以角度完成的。

See some best practices about AngularJS

AngularJS逻辑应该放在HTML文件中吗？

2 个答案: