javascript - 用此关键字和controllerAs替换$scope时，ng-repeat出错

Question

我已在 Controller 中从使用 $scope 对象转换为使用 vm = this。我知道您必须在 view 或 state 中声明一个 controllerAs。

我有两个使用ng-repeat的表，第一个表工作正常，所有数据都已填充，但第二个表由于某种原因没有。我已经尝试过，用户单击的项目已记录在控制台中，但第二个表未填充数据。与 $scope 配合良好。

知道我哪里出错了吗？

var app = angular.module('myApp', ['ngRoute', 'ui.router']);

app.config(['$stateProvider', '$locationProvider', '$urlRouterProvider', '$routeProvider',  function($stateProvider, $locationProvider, $urlRouterProvider, $routeProvider) {

    $urlRouterProvider
        .when('/', '/patents/')
        .otherwise('/patents/');

    $stateProvider
        .state("patents", {
            url: "/patents",
            templateUrl: "templates/patents/list/list-patents.htm",
            controller: "patentCtrl",
            controllerAs: "patents"
        })
        .state("patents.item", {
            url: "/:id",
            templateUrl: "templates/patents/list/patent-item.htm",
            controller: "patentCtrl",
            controllerAs: "item"
        })
}]);

app.factory('patentsService', function($http, $q) {

    var factory = {};

        var REST_SERVICE_URI = 'http://localhost:8080/Sprint002b/restpatent/';

        factory.fetchAllPatents = function() {

            var deferred = $q.defer();
             $http.get(REST_SERVICE_URI)
                .then(
                function (response) {
                    deferred.resolve(response.data);
                },
                function(errResponse){
                    console.error('Error while fetching Users');
                    deferred.reject(errResponse);
                }
            );

            return deferred.promise;
        }

        factory.select = function(item) { 
            selectedItem = item;
            return selectedItem;
        }        

    return factory;

});

app.controller('patentCtrl', ['patentsService', function(patentsService) {

    var vm = this;

    vm.patent={id:null, patentApplicationNumber:'', clientRef: '', renewalStatus: '', currentRenewalCost: '', costBandEndDate:'', renewalCostNextStage:'', renewalDueDate:''};
    vm.patents=[];

    vm.select = function(item) {
       vm.patentItem = patentsService.select(item); //THIS SHOULD POPULATE TABLE
       console.log(vm.patentItem)
    }

    vm.fetchAllPatents = function(){

        patentsService.fetchAllPatents()
            .then(
            function(d) {
                vm.patents = d;
            },
            function(errResponse){
                console.error('Error while fetching Users');
            }
        );
    }

    vm.fetchAllPatents();

}]);

工作台

<tbody>
    <tr ng-repeat="x in patents.patents">
        <td ng-click="patents.select(x)"><a ui-sref="patents.item({id: x.id})">{{x.applicationNumber}}</a></td>
        <td ng-bind="x.clientRef"></td>
        <td ng-bind="x.currentRenewalCost">$</td>
        <td ng-bind="x.costBandEndDate"></td>
        <td ng-bind="x.renewalCostNextStage"></td>
        <td ng-bind="x.renewalDueDate"></td>
    </tr>
</tbody>

table 坏了

<tbody>
    <tr ng-repeat="x in item.patentItem">
        <td>{{x.applicationNumber}}</td>
        <td>{{x.clientRef}}</td>
        <td>{{x.renewalStatus}}</td>
        <td>{{x.costBandEndDate}}</td>
        <td>{{x.renewalCostNextStage}}</td>
        <td>{{x.renewalDueDate}}</td>
      </tr>
</tbody>

Answer 1

然后您应该为 patents.item 状态创建一个新的单独 Controller 。在加载时，您只需从 patentsService 检索当前选定的项目。

//config
.state("patents.item", {
    url: "/:id",
    templateUrl: "templates/patents/list/patent-item.htm",
    controller: "patentItem", //<-- controller added here
    controllerAs: "item"
})
//patenItem new controller
.controller('patentItem', ['patentsService', function(patentsService) {
    var item = this;
    item.select = function(items) {
        vm.patentItem = patentsService.select(item);
        console.log(vm.patentItem)
    };
    function init(){
       item.select();
    }
    init();
}]);