尝试将数据数组设置为从视图调用函数后$scope

Trying to set data array to $scope after calling function from view

本文关键字：调用视图函数 scope 数据数组设置更新时间：2023-09-26

我试图在从视图中调用函数getDetails（detail）后将数据数组设置为$scope，但是当我这样做时，我无法在视图中看到我的数据，但是如果我控制台.log它在我的控制器中数据就在那里。

查看我单击将数据发送到控制器的位置：

 <hr>
  <ul class="rel-results">
 <li ng-repeat="detail in details">
  <a ng-click="getDetails(detail)" href="#/details"> {{detail.longName} </a>
 </li>
  </ul>

重定向的视图，我想要信息：

  <div class="testt">
    <ul class="test">
      <li ng-repeat="routedetail in routedetails">
       <a ng-bind="routedetail.name">{{routedetail.name}}</a>           
    </li>
 </ul>
</div>

我的路线：

 angular.module('myApp').config(function($routeProvider) {
$routeProvider.when("/routes", {
    templateUrl: "routes.html",
    controller : "transportController"

});
$routeProvider.when("/details", {
    templateUrl: "details.html",
    controller : "transportController"
});
$routeProvider.otherwise({redirectTo: "/routes"});
});

控制器：

angular.module("myApp").controller('transportController', function($scope, $http, $base64){
$scope.getDetails = function(detail){
var encoded = $base64.encode("xxx:xxx");
$http({
  url: "xxx",
  headers : {
    "X-AppGlu-Environment":"staging",
    "Authorization": "Basic "+encoded,
    "Content-Type" : "application/json; charset=utf-8"
  },
  method: 'POST',
  data: { 
    "params":{
      "routeId": detail.id
    }
  }
}).then(function(response){ 
    $scope.routedetails = response.data.rows; 
    console.log($scope.routedetails); // it's possible to see the data here it's a array of objects
   console.log($scope.$id); // i can't see this id in my view
 });
 }
});

我用工作示例做了两个jsfiddle：示例JSFiddle 1

angular.module("myApp").controller('transportController', function($scope, $http, $base64) {
    //Initialize array outside : IMPORTANT
    $scope.routedetails = [];
    $scope.getDetails = function(detail) {
        var encoded = $base64.encode("xxx:xxx");
        $http({
            url: "xxx",
            headers: {
                "X-AppGlu-Environment": "staging",
                "Authorization": "Basic " + encoded,
                "Content-Type": "application/json; charset=utf-8"
            },
            method: 'POST',
            data: {
                "params": {
                    "routeId": detail.id
                }
            }
        }).then(function(response) {
            //Clear entire array
            $scope.routedetails.splice(0, $scope.routedetails.length);
            //Fill array with returned data
            response.data.rows.forEach(function(element) {
                $scope.routedetails.push(element);
            });
        });
    }
});

示例 JSFiddle 2

angular.module("myApp").controller('transportController', function($scope, $http, $base64) {
    //Initialize array outside : IMPORTANT
    $scope.routedetails = [];
    $scope.getDetails = function(detail) {
        var encoded = $base64.encode("xxx:xxx");
        $http({
            url: "xxx",
            headers: {
                "X-AppGlu-Environment": "staging",
                "Authorization": "Basic " + encoded,
                "Content-Type": "application/json; charset=utf-8"
            },
            method: 'POST',
            data: {
                "params": {
                    "routeId": detail.id
                }
            }
        }).then(function(response) {
            $scope.routedetails = response.data.rows;
        });
    }
});