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

Codenaugh

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

Codenaugh

感谢所有回答。他们启动了朝着正确方向发展的事情,我对此进行了改进,以得出如下所示的确切答案。

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何将 javascript 转换为 angularjs 代码

来自分类Dev

如何将jQuery代码转换为函数?

来自分类Dev

如何将简单的 jQuery 代码转换为以下代码的 wordpress jQuery

来自分类Dev

如何将Javascript代码转换为C#代码

来自分类Dev

如何将Sapply代码转换为VApply代码

来自分类Dev

如何将Swift代码转换为目标C代码

来自分类Dev

如何将 React 代码转换为 ClojureScript 代码?

来自分类Dev

如何将现有的HTML / JQuery转换为ASP.net/JQuery代码

来自分类Dev

如何将jQuery代码转换为可重用的插件/函数

来自分类Dev

如何将 jQuery 代码(更改类和文本的单击事件)转换为 JavaScript

来自分类Dev

如何将凌乱的代码块转换为函数

来自分类Dev

如何将代码块转换为字符串

来自分类Dev

如何将公式转换为TLA +代码

来自分类Dev

如何将VBscript转换为Python代码?

来自分类Dev

如何将XAML代码的动画转换为C#

来自分类Dev

如何将规则转换为SWRL代码?

来自分类Dev

如何将MIPS指令转换为机器代码?

来自分类Dev

如何将js代码转换为angular 2

来自分类Dev

如何将CSS代码转换为JavaScript中的数组

来自分类Dev

如何将HTML代码转换为JSON对象?

来自分类Dev

如何将命令行转换为python代码

来自分类Dev

如何将原始代码转换为函数示例

来自分类Dev

如何将Shellcode转换为可读的汇编代码/指令?

来自分类Dev

PHP:如何将{{string}}转换为php代码

来自分类Dev

如何将HTML代码转换为Javascript?

来自分类Dev

如何将字母代码转换为数字?

来自分类Dev

如何将这个简单的python代码转换为javascript?

来自分类Dev

如何将C#代码转换为C ++?

来自分类Dev

如何将MIPS指令转换为机器代码?

Related 相关文章

热门标签

归档