Question

我有这个奇怪的问题，我无法显示我的范围变量值。我是棱角分明的新人，但我之前做了很多次。所以这是index.html的主要部分。 div-ui在体内，但在这里看不到：

<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和table，但我很确定这不是问题所在。

如果出现问题，这也是我的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

好的，在这一点上你必须添加$ scope。$ apply或使用'.then'而不是'success'来保持你的代码符合承诺模式。
刚发布时，需要强制执行摘要周期。

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

Answer 2

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

当您点击href链接时，它会在您的MainCtrl中查找{{test1}}方法，然后将状态更改为“搜索”。
然后将NavigationCtrl中的变量和方法加载到范围中，这就是为什么您能够看到加载到范围中的search()的原因。但是你没有调用$scope.search();方法，因此你无法看到其他值。

要检查我的答案，请在功能定义/\A (?:\[(?=[^]]*(]\1?+)))+ ([^][]*) \1 \z/x

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

无法在AngularJs中显示$ scope范围的对象

2 个答案: