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

我是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”.

解决方法

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

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

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

编辑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
>为初学者https://www.codeschool.com/courses/shaping-up-with-angular-js免费提供交互式AngularJS学习
>按主题egghead.io https://egghead.io/technologies/angularjs更多AngularJS资源

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

> 5避免角度范围汤的指南
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/

相关文章

jQuery表单验证提交:前台验证一(图文+视频)
jQuery表单验证提交:前台验证二(图文+视频)
jQuery如何实时监听获取input输入框的值
JQuery怎么判断元素是否存在
jQuery如何实现定时重定向
jquery如何获取复选框选中的值