事件驱动的AngularJS代码，案例研究

从jQuery的背景回来，我发现自己在“视图”交互中有一种“过程”的方式来看待这一点

问题是，这种方法会导致错误的分配，并且代码不可维护

因此，我一直在阅读事件驱动的JavaScript，并尝试将此概念应用于AngularJS

为此，我考虑了一个用户提交表单，分两个步骤，然后将所有内容重置为原始状态。

这就是我想到的：

1。您对Angular的这种编程风格有何看法？

2。您将如何优化代码？

3。你会怎么做？

下面是代码：

<div ng-controller="TheController" ng-init="events.init()">

        <p ng-if="showName">Name: <input type="text"></p>
        <p ng-if="showAge">Age: <input type="text"></p>

        <p ng-if="showHeight">Height: <input type="text"></p>
        <p ng-if="showWeight">Weight: <input type="text"></p>

        <button ng-if="showButtonOne" ng-click="events.submittedAgeAndName()">Submit age and name</button>

        <button ng-if="showButtonTwo" ng-click="events.submittedHeightAndWright()">Submit height and weight</button>

        <p ng-if="showThankYou">Thank you for submitting!</p>

        <button ng-if="showGetEverythingBack" ng-click="events.getEverythingBack()">Get everything back!</button>
    </div>

    <script type="text/javascript">

        var app = angular.module('app', []);

        app.controller('TheController', function ($scope) {

            $scope.events = {
                'init': function () {
                    $scope.showName = true;
                    $scope.showAge = true;
                    $scope.showHeight = false;
                    $scope.showWeight = false;
                    $scope.showThankYou = false;
                    $scope.showButtonOne = true;
                    $scope.showButtonTwo = false;
                    $scope.showGetEverythingBack = false;
                },
                'submittedAgeAndName': function () {
                    $scope.showName = false;
                    $scope.showAge = false;
                    $scope.showHeight = true;
                    $scope.showWeight = true;
                    $scope.showThankYou = false;
                    $scope.showButtonOne = false;
                    $scope.showButtonTwo = true;
                    $scope.showGetEverythingBack = false;
                },
                'submittedHeightAndWright': function () {
                    $scope.showName = false;
                    $scope.showAge = false;
                    $scope.showHeight = false;
                    $scope.showWeight = false;
                    $scope.showThankYou = true;
                    $scope.showButtonOne = false;
                    $scope.showButtonTwo = false;
                    $scope.showGetEverythingBack = true;
                },
                'getEverythingBack': function () {
                    this.init();
                }
            }
        });
</script>

名称：

年龄：

高度：

重量：

提交年龄和姓名
提交身高和体重
感谢您提交

把所有东西都拿回来！
var-app=angular.module（'app'，[]）；
应用控制器（“控制器”，功能（$scope）{
$scope.events={
“init”：函数（）{
$scope.showName=true；
$scope.showAge=true；
$scope.showHeight=false；
$scope.showWeight=false；
$scope.showThankYou=false；
$scope.showButtonOne=true；
$scope.showButtonTwo=false；
$scope.showGetEverythingBack=false；
},
“submittedAgeAndName”：函数（）{
$scope.showName=false；
$scope.showAge=false；
$scope.showHeight=true；
$scope.showWeight=true；
$scope.showThankYou=false；
$scope.showButtonOne=false；
$scope.showButtonTwo=true；
$scope.showGetEverythingBack=false；
},
“SubmittedHeightWright”：函数（）{
$scope.showName=false；
$scope.showAge=false；
$scope.showHeight=false；
$scope.showWeight=false；
$scope.showThankYou=true；
$scope.showButtonOne=false；
$scope.showButtonTwo=false；
$scope.showGetEverythingBack=true；
},
“getEverythingBack”：函数（）{
this.init（）；
}
}
});

您对Angular中的这种编程风格有何看法

• 太多无意义的变量
• 对于所有事件都没有目的，实际上不需要任何功能，但如果您这样做，您只需更改内部的步骤，如plunker中的

  重置

您将如何优化代码

• 声明性html，数据绑定，使用指令，所有规则规则
• 我可能会将整个向导放在一个指令中，这将占用大量的html模板，并使代码更加可重用

你会怎么做

这里有一个

下一个
下一个
返回

您谈论的事件在哪里。

  <div ng-switch="events.step">
     <div ng-switch-when="1"><button ng-click="events.step=2">next</button></div>
     <div ng-switch-when="2"><button ng-click="events.step=3">next</button></div>
     <div ng-switch-when="3"><button ng-click="events.reset();">back</button></div>
 </div>