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

Question

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

我在/main中有一个搜索字段。当我编写查询并单击搜索按钮时，该函数执行数据获取并分配给范围变量。路由器URL将更改为“/ Result”和相应的视图显示。但视图没有绑定范围值。 / 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时，绑定成功。 我已经读过使用$ scope鼓励超过$ rootScope。

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（Angular方式）

<强>控制器

$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;
}