简单angularjs SPA中的问题

Question

我用一个用户名/密码编写了一个简单的 SPA（单页应用程序），并在顶部提交了按钮。当用户成功登录时，根据他的角色，他应该在页面的其余部分（底部）看到详细信息（employeeid，指定等）。我的问题是，即使在用户登录之前，页面底部也会被加载。因此，当用户提交登录凭据时，页面底部不会重新加载我从服务器获取的数据。

准确地说，在我的下面的代码中，u1.UserDetails.firstName，u1.UserDetails.designation和u1.UserDetails.employeeId应该在用户提交登录凭证后重新加载。但它目前没有发生，我得到一个空白屏幕。谁能帮帮我吗。我知道我在这里错过了一些非常愚蠢的东西。我很抱歉，因为我是UI开发的新手。

的index.html （我的html页面的主体）

<div class="navbar navbar-inverse">
    <form class="form-inline" ng-submit="submitLoginData()" ng-controller="LoginController">

        <div class="form-group">
         <!--   <label class="sr-only" for="exampleInputEmail2">Email address</label> -->
            <input type="email" class="form-control"  placeholder="Enter email" ng-model="emailId"/>
        </div>
        <div class="form-group">
          <!--  <label class="sr-only" for="exampleInputPassword2">Password</label> -->
            <input type="password" class="form-control" placeholder="Password" ng-model="password"/>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox"> Remember me
            </label>
        </div>
       <!-- <button type="submit" class="btn btn-default">Sign in</button> -->
        <input type="submit" class="btn btn-default" id="SignIn" value="Sign In">
    </form>

</div>


<div class="container">
    <div class="row">
        <div class="col-lg-2">
                    <img ng-src="{{imageSource}}" class="img-thumbnail">
        </div>
      <div class="col-lg-10" >
            <table ng-table="tableParams" class="table">
                <tr>
                    <td >
                        {{u1.UserDetails.firstName}}
                    </td>
                    <td>{{u1.UserDetails.designation}}
                    </td>
                    <td>{{u1.UserDetails.employeeId}}</td>
                </tr>
            </table>
        </div>
    </div>
</div>

controller.js

myApp.controller('LoginController' ,
['$scope','LoginService' ,'$http' , function($scope , LoginService, $http ){

    $scope.submitLoginData = function(LoginService) {

        var tempStr= "userName:" +$scope.emailId + ", password:" + $scope.password ;

        $http.get('http://localhost:8181/RestCXF7/services/UserInfo/1').
            success(function(data , status , headers, config) {
                alert("Http service" + data);

                $scope.u1 = data;
                $scope.imageSource = 'img/tests.JPG';

            }).
            error(function (data, status, headers, config) {
                alert("error" + status);
            });

    };
}]);

Answer 1

您需要使用ng-controller div。

包装所有元素

控制器指令中只有子元素才能获得它的范围： 您的代码存在的问题是只有表单内容才能获得正确的范围。

<div ng-controller="LoginController">

    <div class="navbar navbar-inverse">
        <form class="form-inline" ng-submit="submitLoginData()">
            <!-- more --> 
        </form>

    </div>


    <div class="container">
        <div class="row">
            <!-- the code below -->
        </div>
    </div>

</div>

---

更新

我创建了一个带有jade的演示plunker：http://plnkr.co/edit/FNk45ekzeT1xBaphKrjp?p=preview