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

编辑3：由于我对我的回答非常感兴趣，因此我决定扩展它以避免/最佳实践，以便代码更易测试，可维护并更容易迁移到Angular 2：< / p>

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/

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>

控制器＆amp;指令：

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

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

3 个答案: