我是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”。
感谢所有回答。他们启动了朝着正确方向发展的事情,我对此进行了改进,以得出如下所示的确切答案。
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] 删除。
我来说两句