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

Question

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

我在 /main.When 中有一个搜索字段我编写查询并单击搜索按钮，该函数执行数据获取并分配给范围 variable.The 路由器 URL 将更改为 '/Result' 并且相应的视图是 displayed.But 该视图没有绑定范围值。 /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');
}

当相应的视图发生变化时，绑定没有完成。但是当我将 $scope.documents 替换为 $rootScope.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 即可。但是如果你真的需要使用另一个视图，并且假设你的搜索 returns 只有字符串，你可以尝试通过 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;
}

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

Unable to bind $scope value to view on Url change

angularjs

angular-routing

解决方案 1（Angular 方式）

解决方案 2（您的方式）