如何将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的神奇之处在于双向绑定.

您可以使用带有登录控制器和工厂/服务的指令来保存用户名和密码并将其发送到数据库.对于此登录,根本不需要JQuery.您可以在此处查看此问题: AngularJS-每个路由和控制器中的登录和身份验证

编辑:在上面的问题中,它不是指令而不是控制器.指令可以具有应用于特定范围的控制器.你可以对两者做同样的事情,但取决于你将重复使用这个登录片段的次数 - 我想你不需要它但我相信它仍然是一个很好的做法.

编辑2:如果你还没有读过这个,请做!我相信你会回答你关于两种不同(我会说的相反)技术的大部分问题.如果我有jQuery背景,"在AngularJS中思考"？ 此外,由于我也来自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

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

编辑3:由于我对我的回答很感兴趣,所以我决定扩展它以避免/最佳实践,以便代码更易测试,可维护并更容易迁移到Angular 2:

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

• AngularJS中没有$ scope汤,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：

<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);
                }
            });
        }
    };
});