javascript – Angular View未使用新数据更新

我是一个Angular新手,如果这很明显,那就很抱歉.

我有一个返回一个对象数组的后端.在我检索它们之后,我移动到下一页,我需要为每个对象显示一个复选框.我可以成功检索它们,因此我将浏览器的位置更改为应显示复选框但未显示任何内容的下一页.我尝试使用$scope.$apply()但它会抛出一个错误,说明摘要已经发生但我认为这是正确的,因为我使用了包含在$scope中的ng-click.$apply()我认为？

我可以成功地在控制台中看到正在打印的服务,但它们不会出现在页面中.不知道我在这里做错了什么？

在我的起始视图中：

<form>
    <div class="form-group">
        <select id="main_service" name="main_service" class="form-control" ng-model="mainService">
             <option>Please Select...</option>
             <option ng-repeat="service in mainServices" value="{[{service}]}">{[{service}]}</option>  
        </select>
    </div>
    <div class="form-group">
        <button class="btn btn-primary" type="submit" ng-click="updateServices()">Continue</button>
    </div>
</form>

在我的控制器中：
    var professionalSignupControllers = angular.module(‘professionalSignupCtrls’,[])

professionalSignupControllers.controller('professionalQuestions', function($scope, $http, Service, $sce, $routeParams,$location){
$scope.mainService = "";
$scope.services = [];

$scope.updateServices = function(){
    Service.getServices($scope.mainService)
        .success(function(data) {
            $scope.services = data
            console.log($scope.services)
            //$scope.$apply(); throws digest error!
            $location.path( '/services' );
        })
        .error(function(data, error) {
            event.preventDefault();
            alert("Oh Dear")
        });
};

})

在我的服务部分：

<div>
    <div ng-repeat="service in services" class="checkbox">
        <label><input type="checkbox" name="service[]" value="{[{service.id}]}" ng-model="user.services">{[{service.label}]}</label>
    </div>
</div>

我的servicesService(坏名字)：

angular.module('servicesService', [])

.factory('Service', function($http) {

    return {
        getServices : function(tag) {
            return $http.get('/api/service?searchTerm='+tag)
        }
    }
});

我的应用配置：

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

    $routeProvider.
        when('/start', {
            templateUrl: '/js/partials/start-professional-questions.html',
            controller: 'professionalQuestions'
        }).
        when('/services', {
            templateUrl: '/js/partials/services-professional-questions.html',
            controller: 'professionalQuestions'
        }).
        otherwise({
            redirectTo: '/start'
        });

    $interpolateProvider.startSymbol('{[{').endSymbol('}]}');

    }
]);

我正在使用{[{}]}进行插值,否则它将使用Blade语法进行分类

解决方法:

你处于角度范围内,所以你不需要触发$scope.$apply().只有当你超出角度范围时才需要它.

Regarding your issue:

您将在服务中返回promise对象.因此返回的数据仅在该控制器中可用.如果您要转到下一页,那么该数据将无法使用.

如果要共享数据,则必须将其存储在服务中.

在您的服务中：

 angular.module('servicesService', [])

.factory('Service', function($http, $q) {
    var data;
    return {
        getData: function() {
           return data;
        },
        getServices : function(tag) {
            var defer = $q.defer();
            $http.get('/api/service?searchTerm='+tag).then(function(response) {
                data = response;
                defer.resolve(response);
            });
            return defer.promise;
        }
    }
});

现在在另一个控制器中,您可以使用getData()访问数据

在您的控制器中,您可能需要稍微修改它：

$scope.updateServices = function(){
    Service.getServices($scope.mainService).then(function(data){
            $scope.services = data
            console.log($scope.services)
            $location.path( '/services' );
        }, function(data, error) {
            event.preventDefault();
        });
};

在第二个控制器中,您可以通过Service.getData()访问它

由于您对两个视图使用相同的控制器,因此需要使用if条件来检查路由并单独获取数据.否则,您最终可能会再次拨打服务电话.

标签：javascript,angularjs,angularjs-scope,angularjs-ng-repeat,angularjs-routing
来源： https://codeday.me/bug/20190829/1764482.html