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

How to convert jQuery code into usable AngularJS code

本文关键字：代码 AngularJS 转换 jQuery      更新时间：2023-09-26

我是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-每个路由和控制器中的登录和身份验证

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

编辑2:如果您还没有"阅读"这篇文章，请阅读！我相信你会回答你关于这两种不同（我会说相反）技术的大部分问题"AngularJS中的思考；如果我有jQuery背景？此外，由于我也来自Jquery背景，我按顺序遵循了这四个资源，现在我可以制作我想要的大部分东西：

  • Angular.js在50个例子中的介绍（上）https://www.youtube.com/watch?v=TRrL5j3MIvo

  • Angular.js在50个例子中的介绍（下）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

edit3:由于我对我的答案很感兴趣，我决定用避免的内容/最佳实践来扩展它，这样代码更易于测试、维护，也更容易迁移到Angular 2:

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

  • AngularJS中没有$scope汤，bindToControllerhttps://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/

您可以尝试一下，它使用指令和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;
           };
        }
    };
});

感谢所有回答的人。他们朝着正确的方向开始了这件事，我能够改进它，得出下面所示的确切答案。

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);
                }
            });
        }
    };
});
相关文章：