Question

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

查看我点击向控制器发送数据的位置：

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

 }
});

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;

        });
    }
});

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

1 个答案: