javascript - 部分 View 中的 data-ng-repeat 不显示数据

Question

这是我的 module.js

            var app = angular.module("ApplicationModule", ["ngRoute"]);

            app.factory("ShareData", function () {  
            return { value: 0 }  
            });  

            //Showing Routing  
            app.config(['$routeProvider', '$locationProvider', function      
            ($routeProvider, $locationProvider) {
            debugger;
            $routeProvider.when('/ShowAll',
                    {
                        templateUrl: 'Home/ShowAll',
                        controller: 'ShowAllController'
                    });
                    $routeProvider.otherwise(
                    {
                       redirectTo: '/'
                     });
                    }]);

这是我的 Services.js

                app.service("SampleService", function ($http) {
                this.getSamples = function () {
                return $http.get("/api/Sample");
                };
                this.getSample = function (id) {
                return $http.get("/api/Sample" + id);
                }; 
                });

这是我的 ShowAllController.js

                  app.Controller('ShowAllController', function ($scope,          
                  SampleService) {
                  loadAll();
                  function loadAll() {
                  var promiseGet = SampleService.getSamples();
                  promiseGet.success(function (data) { $scope.Samples = data           
                  },
                  function (errordata) {
                  $scope.error = errordata;
                  }
                  );
                  }
                  });

这是我的index.cshtml

                   @{
                       ViewBag.Title = "API's";
                    }
                   @section scripts{
                   <script src="~/Scripts/angular.js"></script>
                   <script src="~/Scripts/angular-route.min.js"></script>
                   <script src="~/Scripts/Module.js"></script>
                   <script src="~/Scripts/Services.js"></script>
                   <script src="~/Scripts/ShowAllController.js"></script>
                    }
                   <div class="container" data-ng-app="ApplicationModule">
                    <div class="panel panel-default">
                  <div class="panel-header">
    <div class="row">
<div><h4 class="col-xs-6">GET api/Patient</h4><a href="#/ShowAll" class="btn btn-success col-xs-6" role="button">Patients List</a></div>
</div></div>
    <div class="panel-body" data-ng-view>

    </div>
</div>

这是我的部分 View (ShowAll.cshtml)

               <div data-ng-controller="ShowAllController">
                <table>
                    <tr>
                  <th>ID</th>
                  <th>Name</th>
                 <th>Age</th>
                 <th>Address</th>
                   </tr>
                 <tr data-ng-repeat="person in Samples">
                 <td>{{person.Id}}</td>
                  <td>{{person.Name}}</td>
                 <td>{{person.Age}}</td>
                  <td>{{person.Address}}</td>
                  </tr>
                  </table>
                   </div>

我的返回 PartialView 代码位于我的 HomeController 中的 ShowAll ActionResult 中。问题是，当我单击该按钮时，它只显示表的标题，而没有数据。

注意:这是一个网络 API。

谢谢。

Answer 1

在 ajax 调用之前将以下语句添加到 ShowAllController 中，以便 Angular 在配置时了解此作用域变量

app.Controller('ShowAllController', function ($scope, SampleService) {

    $scope.Samples = []; // <- NEW LINE HERE!

    loadAll();
    function loadAll() {
    var promiseGet = SampleService.getSamples();
    promiseGet.success(function (data) { $scope.Samples = data           
    },
    function (errordata) {
    $scope.error = errordata;
    }
    );
    }
});

Angular 依赖注入(inject)可能不会在配置时设置范围 var Samples。然后在运行时，它不会将该变量识别为应该更新的内容。

如果这不起作用，还请尝试将 Promise 的成功结果包装到 $scope.$apply() 中，因为 Angular 在运行其摘要函数时可能不会意识到这一点。

$scope.$apply(function () {
    $scope.Samples = data;
})