如何将 jQuery 代码转换为可用的 AngularJS 代码

Question

我是 AngularJS 的新手，想为登录页面创建类似于单击“忘记密码”链接时在此处找到的功能：

http://bootsnipp.com/snippets/featured/login-amp-password-reminder#comments

最好使用指令，因为这是行为，而不是控制器？我已经尝试为它创建一个控制器，但是当我搜索有关该主题的帮助时，我发现为此使用控制器可能不是要走的路。这是我最新的试验，但没有成功（点击链接时没有任何作用）：

在 js 文件中的控制器端：

angular.module('mean.users')
    .controller('SwitcherCtrl', ['$document',
        function($document) {
        $document.ready(function () {
            $document.getElementById('olvidado').click(function (e) {
                e.preventDefault();
                $document.getElementById('form-olvidado').toggle('500');
            });
            $document.getElementById('acceso').click(function (e) {
                e.preventDefault();
                $document.getElementById('form-olvidado').toggle('500');
            });
        });
    }
])

在 html 方面，我在必要时包含了 ng-controller="SwitcherCtrl"。

Answer 1

JQuery 方法与 AngularJS 完全不兼容。 DOM 操作只允许在链接函数中的指令中使用，否则这是一种非常糟糕的做法。尝试从头开始，忘记 JQuery。 AngularJS 的神奇之处在于 2-way 绑定。

您可以使用带有登录控制器和工厂/服务的指令来保存用户名和密码并将其发送到数据库。对于此登录，绝对不需要 JQuery。你可以在这里检查这个问题： AngularJS- Login and Authentication in each route and controller

编辑：在您上面的问题中，它不是指令而不是控制器。指令可以具有应用于特定范围的控制器。您可以对两者执行相同的操作，但取决于您将重用此登录 sn-p 的次数 - 我想您不需要它，但我相信制作一个仍然是一个好习惯。

编辑 2：如果你还没有读过这一篇，请看！我相信您会回答有关这两种不同（我会说相反）技术的大部分问题。 "Thinking in AngularJS" if I have a jQuery background? 另外，由于我也是 Jquery 出身，所以我按照这四个资源的顺序，现在我可以做出大部分我想要的东西了：

• 50 个示例中的 Angular.js 简介（第 1 部分）https://www.youtube.com/watch?v=TRrL5j3MIvo

• 50 个示例中的 Angular.js 简介（第 2 部分）https://www.youtube.com/watch?v=6J08m1H2BME

• 为初学者免费学习交互式 AngularJS https://www.codeschool.com/courses/shaping-up-with-angular-js

• 更多 AngularJS 资源，按主题 egghead.io https://egghead.io/technologies/angularjs

编辑 3： 因为我看到对我的回答很感兴趣，所以我决定用要避免的/最佳实践来扩展它，以便代码更易于测试、可维护并且更容易迁移到 Angular 2：

• 在 Angular 中避免 Scope Soup 的 5 条指南 http://www.technofattie.com/2014/03/21/five-guidelines-for-avoiding-scope-soup-in-angular.html

• 没有 $scope 汤，AngularJS 中的 bindToController https://toddmotto.com/no-scope-soup-bind-to-controller-angularjs/

• Angular JS - 你可能不应该在控制器中使用 $watch。 http://www.benlesh.com/2013/10/title.html

• 提高 AngularJS 性能的 11 个技巧 http://www.alexkras.com/11-tips-to-improve-angularjs-performance/

Answer 2

你可以试试这个，它使用指令和 html。登录或忘记用户名的显示与指令链接函数中范围变量的状态相关。

Fiddle

<div ng-app="myApp">

    <div my-auth>

        <div ng-show="active">
            <form name="login">
                <input type="email" ng-model="email" placeholder="your@email.com" required />
                <input type="password" ng-model="passwd" required />
                <button ng-disabled="!login.$valid">Login</button>
            </form>
            <a href="#" ng-click="toggle()">forgot password?</a>
        </div>

        <div ng-show="!active">
            <form name="forgot">
                <input type="email" ng-model="email" placeholder="your@email.com" required />
                <button ng-disabled="!forgot.$valid">Reset Password</button>
            </form>
            <a href="#" ng-click="toggle()">access</a>
        </div>
    </div>
</div> 

指令

angular.module('myApp', [])
.directive('myAuth', function(){
    return {
        link: function(scope, elem, attr){
           scope.active = true;
           scope.toggle = function(){
               scope.active = !scope.active;
           };
        }
    };
});

Answer 3

感谢所有回答的人。他们以正确的方向开始了这件事，我能够对其进行改进以得出如下所示的确切答案。

HTML：

<div ng-controller="SwitcherCtrl">
    <div data-fold-toggle="active">
        <form id="login">
            <input type="email" ng-model="email" required="">
            <input type="password" ng-model="password" required="">
            <button type="submit">Login</button>
            <a ng-click="active=!active">Forgot your password?</a>
        </form>
    </div>
    <div data-fold-toggle="active" style="display: none;">
        <form id="forgotpw">
            <input type="email" ng-model="email" required="">
            <button type="submit">Reset Password</button>
            <a ng-click="active=!active">Account Access</a>
        </form>
    </div>
</div>

控制器和指令：

.controller('SwitcherCtrl', function($scope) {
    $scope.active = true;
})
.directive('foldToggle', function() {
    return {
        restrict: 'A',
        scope:{
            isOpen: '=foldToggle'
        },
        link: function(scope, element) {

            scope.$watch('isOpen', function(newVal,oldVal){
                if(newVal !== oldVal){
                    element.toggle(200);
                }
            });
        }
    };
});