Angularjs 无法在Url更改时将$scope值绑定到视图

我试图使用angularJS创建一个搜索应用程序。当路由器Url发生变化时，我面临绑定$scope值以查看的问题

我在/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'
                      });

控制器： 在按钮上单击from/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的内容。

当您从一个页面移动到另一个页面时，控制器和

$scope

会重新初始化。如果您想使用$范围，则应该考虑使用<强> <代码>服务< /代码> <强>共享控制器之间的数据。 创建一个服务，它将保存您的变量

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

---

从一页移动到另一页时，控制器和

$scope

将重新初始化。如果您想使用$范围，则应该考虑使用<强> <代码>服务< /代码> <强>共享控制器之间的数据。 创建一个服务，它将保存您的变量

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

---

正如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');
}

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

查看

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

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

控制器

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

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

---

正如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');
}

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

查看

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

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

控制器

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

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

---

/main和/Result使用相同的控制器，因为它们有一个共同的功能（我上面提到的功能）。@stars即使您使用相同的控制器，当您的路由更改/main和/Result使用相同的控制器时，它也会重新初始化，因为它们有一个共同的功能（我上面提到的功能）@stars即使你使用同一个控制器，当路由更改时，它将重新初始化I需要使用不同的视图，因为/main中使用的视图仅用于搜索输入，结果显示在与/result关联的各个视图I需要使用不同的视图，因为/main中使用的视图仅用于搜索输入，结果显示在各个视图中关联/结果