Question

从jQuery背景回来后，我发现自己有一种“程序化”的方式来看待这种“视觉中”的互动。

问题是，这种方法会导致各种错误，并且代码无法维护。

所以我一直在阅读事件驱动的JavaScript，并尝试在AngularJS上应用这个概念。

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

这就是我想出的： here is a plunker

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>

Answer 1

您对Angular中的这种编程风格有何看法？
- 方式太多无意义的变量
- 对于所有事件没有任何目的，实际上不需要任何功能，但是如果你这样做，你只需改变内部的步骤，如在plunker中reset。
您如何优化代码？
- 声明性html，数据绑定，使用指令，所有常规角度原则。
- 我可能会把整个向导放在一个指令中，它会收集很多模板html并使代码更可重用。
你会怎么做？

这里是Plunker

  <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>

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

1 个答案: