javascript - 从 View 调用函数后尝试将数据数组设置为 $scope

Question

我试图在从 View 调用函数 getDetails(detail) 后将数据数组设置为 $scope，但是当我这样做时，我无法在我的 View 中看到我的数据，但是如果我在我的 Controller 中使用 console.log 它数据在那里。

查看我点击向 Controller 发送数据的位置:

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

重定向的 View ，我想要信息:

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

Controller :

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

 }
});

Answer 1

我用工作示例制作了两个 jsfiddle:Example 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);
            });

        });
    }
});

Example 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;

        });
    }
});