无法在 AngularJs 中显示 $scope 对象数组

Question

我有一个奇怪的问题，我无法显示我的范围变量值。我是 Angular 新手，但我以前做过很多次。所以这里是 index.html 的主要部分。 div-ui 在 body 内部，但在这里看不到：

<input type="text" class="form-control" ng-model="searchUsers" placeholder="Search users"/>
<a ng-click="search()" ui-sref="search">Search</a>

<div ui-view>

</div>

这里是search.html：

<p>Hello world</p> // Shows normally
<p>{{test1}}</p> // Shows normally
<p>{{test2}}</p> // Nothing
<p ng-repeat="x in searchResult">{{x.username}}</p> // Nothing
<p ng-repeat="(key,value) in searchResult">{{value}}</p> // Nothing
<p ng-repeat="(key,value) in searchResult">{{value.username}}</p> // Nothing

这里是控制器：

(function(){
angular.module('TimeWaste')
    .controller('NavigationCtrl', ["$scope", "$http", "$state",
    function($scope,$http,$state){

        $scope.searchResult = [];
        // Tried with and without this

        if(localStorage['User-Data']){
            $scope.loggedIn = true;
        }else{
            $scope.loggedIn = false;
        }

        $scope.logUserIn = function(){
            $http.post('api/user/login', $scope.login)
                .success(function(response){
                    localStorage.setItem('User-Data', JSON.stringify(response));
                    $scope.loggedIn = true;
                }).error(function(error){
                    console.log(error);
                });
        }

        $scope.logOut = function (){
            localStorage.clear();
            $scope.loggedIn = false;
        }

        $scope.test1 = "hi";

        $scope.search = function (){

             $scope.test2 = "hi again";

            $http.post("api/user/search", {username: $scope.searchUsers})
                .success(function(response){

                    $scope.searchResult = response;
                    console.log($scope.searchResult); 
         // returns array of objects. There is all information that i want.

                }).error(function(error){
                    console.log("ei");
                });
        }
    }]);
}());

一切看起来都很正常。在搜索功能内部，它正在工作，console.log 只返回我除外的内容。我也尝试过重复 div 和表格，但我很确定这不是这里的问题。

如果有问题，这也是我的 app.js：

(function(){
angular.module('TimeWaste', ['ui.router', 'ngFileUpload'])
    .config(function ($stateProvider, $urlRouterProvider){

        $urlRouterProvider.otherwise("/");

        $stateProvider
            .state("main", {
                url: "/",
                templateUrl: "app/main/main.html",
                controller: "MainCtrl"
            })
            .state("search", {
                url: "/search",
                templateUrl: "app/main/search.html",
                controller: "NavigationCtrl"
            })
    });
}());

还有更多的状态，它们都工作得很好。我把它缩短了一点，所以这篇文章不会那么长。

Answer 1

您能够看到{{test1}} 而看不到其他值的原因是您有两个不同的控制器，分别称为“MainCtrl”和“NavigationCtrl”。您正在使用 ui-sref 切换状态。所以，这就是正在发生的事情。

1. 当您单击 href 链接时，它会在 MainCtrl 中查找 search() 方法，然后将状态更改为“搜索”。

2. 然后它将来自 NavigationCtrl 的变量和方法加载到作用域中，这就是为什么您能够看到已加载到作用域中的{{test1}}。但是您还没有调用 search() 方法，因此您无法看到其他值。

要检查我的答案，请在您的函数定义 $scope.search(); 之后在控制器内显式调用您的方法

如果您看到结果，那就是您的问题。

Answer 2

好的，此时您必须添加一个 $scope.$apply 或使用 '.then' 而不是 'success' 以使您的代码符合 promise 模式。
当您刚刚发布时，需要强制摘要循环发生。

$http.post("api/user/search", {username: $scope.searchUsers})
    .success(function(response){
       $scope.$apply(function() {
           $scope.searchResult = response;
        });
    }).error(function(error){
        console.log("ei");
    });