无法绑定 $scope 值以查看 Url 更改

Question

我尝试使用 angularJS 创建搜索应用程序。我遇到了绑定 $scope 值以查看路由器 URL 更改时的问题。

我在 /main 中有一个搜索字段。当我编写查询并单击搜索按钮时，该函数会获取数据并将其分配给范围变量。路由器 URL 将更改为“/结果”和相应的视图已显示。但视图没有绑定范围值。 /main 和 /Result 使用相同的控制器。

主模块中的路由器代码：

 $routeProvider.
                      when('/main', {
                          templateUrl: '/views/search.html',
                          controller: 'searchCtrl'


                            }).when('/Result',{                                 
                                templateUrl:'/views/Result.html',
                                  controller: 'searchCtrl' ,
                                  reloadOnSearch: false


                                }).otherwise({      

                          redirectTo: '/main'
                      });

控制器： 从 /main 中单击按钮

$scope.fetchResult=function(searchWord){

 shService.fetchResultDocumentsList(searchWord).data.then(function(response){
//service call here-data fetch is successfull.
 $scope.docResultList=response[0];
                 $scope.docResultList=response[0];
                 $scope.documents =  $scope.docResultList.data.documentEntities;
$location.path('/Result');
}

当相应的视图发生变化时，绑定没有完成。但是当我用 $rootScope.documents 替换 $scope.documents 时，绑定是成功的。 我已阅读 $rootScope 鼓励使用 $scope。

Answer 1

当您从一个页面移动到另一个页面时，控制器和 $scope 会重新初始化。如果你想使用 $scope ，你应该考虑使用 service 在控制器之间共享数据。

创建一个服务，它将保存您的变量。

angular.service("dataService", function() {
    this.value1 = ""   
});

在您的控制器中引用该服务，

angular.controller("myCntrl1", function($scope, dataService) {
    $scope.val= dataService.value1 ;
});


angular.controller("myCntrl2", function($scope, dataService) {
    $scope.val= dataService.value1 ;
});

Answer 2

正如 Sajeetharan 所说，当您更新位置时，$scope 会重新初始化。

使用 angularJs，您无需更改位置。您只需在用于搜索的同一视图中更新 $scope。 但是如果你真的需要使用另一个视图，并且假设你的搜索只返回字符串，你可以尝试通过 url 传递数据，然后从你的控制器中获取它。

类似这样的东西（未测试）：

解决方案 1（角度方式）

控制器

$scope.documents = ""; // init your results to empty/null, as you need

$scope.fetchResult=function(searchWord){

 shService.fetchResultDocumentsList(searchWord).data.then(function(response){
//service call here-data fetch is successfull.
 $scope.docResultList=response[0];
                 $scope.docResultList=response[0];
                 $scope.documents =  $scope.docResultList.data.documentEntities;
$location.path('/Result');
}

查看

<!-- search div is over here -->

<!-- results goes here -->
<div ng-if="$scope.documents">
 {{$scope.documents}}
</div>

解决方案 2（您的方式）

路由器

$routeProvider.

when('/main', {
templateUrl: '/views/search.html',
controller: 'searchCtrl'})

.when('/Result/{data:[a-z]{1,}}',{ //here we specify that data expected format is only lowercase letters
 templateUrl:'/views/Result.html',
 controller: 'searchCtrl' ,
 reloadOnSearch: false
})
.otherwise({      
 redirectTo: '/main'
});

控制器

//  dont forget to inject $stateParams service in your controller
if( !$stateParams.data){
 $scope.data = $stateParams.data;
}