javascript - Angularjs - 登录，停留在页面上，在身份验证后加载 div

Question

我不确定如何为我的 AngularJS 网站处理这个问题......

我需要将登录表单加载到网站上的任何页面(不离开页面)，然后异步传递用户登录信息并获得成功或失败返回，然后在登录成功时将 div html 模板加载到同一页面。 ..

看到一个完整的例子会很棒，但我当然不希望这样。但是我在网上找不到一个简单的例子(对新手没有帮助)。

有人可以指出好的解决方案或至少可以理解的示例吗？ .. 或类似的东西，不会被不相关的代码弄得乱七八糟。

Answer 1

我使用指令进行登录，有点像这样。您可以大致了解它的工作原理。

.directive('login', function($http, $rootScope) {
    return {
        restrict: 'E',
        template: " <form> " +
                  "<label>Username</label>" +
                  "<input type='text' ng-model='username'>" +
                  "<label>Password</label>" +
                  "<input type='password' ng-model='password'>" +
                  "<br>" +
                  "<input type='submit'>" +
                  "</form>",
        link: function(scope, elem, attrs) {

            elem.bind('submit', function() {

                var user_data = {
                    "username": scope.username,
                    "password": scope.password,
                };

                $http.post("http://localhost:8001/api-token-auth/", user_data)
                    .success(function(response) {
                        $http.defaults.headers.common['Authorization'] = 'Token ' + response.token;
                        $rootScope.$broadcast('event:login-confirmed');
                        elem.slideUp();
                }); 

                scope.$on('event:auth-loginRequired', function () {
                    var main = document.getElementById("main");
                    main.hide();
                    elem.slideDown();
            });

            });

         }
     }
 });