角视图不使用新的数据更新 [英] Angular View Not Updating with New Data

问题描述

我是有点角度新手很抱歉，如果这是显而易见的。

I'm a bit of an Angular newbie so sorry if this is obvious.

我有一个后端返回对象的数组。当我找回它们，我移动到下一个页面，我需要显示每个对象的复选框。我可以成功地找回它们，所以我改变浏览器的位置到复选框应显示出来，而是显示没有下一页。我试着使用$范围。$适用（）但它抛出一个错误，指出摘要已经发生，但我想是因为我用NG单击该包装在$范围这是正确的。$适用（）我想？

I have a backend which returns an array of objects. After I retrieve them, I move to the next page and i need to display a checkbox for each of the objects. I can successfully retrieve them, so I change the location of browser to the next page where the checkboxes should be displayed but nothing is being displayed. I tried using $scope.$apply() however it throws an error stating that a digest is already taking place but I think that's correct because I've used ng-click which is wrapped in a $scope.$apply() I think?

我可以看到被打印出来的服务中成功控制台，但它们不会出现在页面中。不知道我在做什么错在这里？

I can see the services being printed out in the console successfully, however they don't appear in the page. Not sure what I'm doing wrong here?

在我出发的观点：

<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'，[]）

in my controller: 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（坏名）：

My servicesService (bad name):

angular.module('servicesService', [])

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

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

我的应用程序配置：

My app config:

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('}]}');

    }
]);

我使用{[{}]}进行插值，否则它将与刀片语法类

I'm using {[{ }]} for interpolation as otherwise it would class with the Blade syntax

推荐答案

您是在角范围，所以你不必触发 $范围。$适用（）。当你出门在外的角度范围，它才是必需的。

You're in angular scope and so you need not trigger $scope.$apply(). it's required only when you're out of angular scope.

关于您的问题：

您会返回在服务承诺的对象。这样返回的数据是唯一的，仅该控制器可用。如果你移动到下一个页面那么DAT将无法使用。

You're returning the promise object in the service. So the data returned is only available in that controller alone. If you're moving to next page then that dat won't be available.

如果您要共享的数据，那么你必须存储服务中。

If you want to share the data, then you must store that inside the service.

在你的服务：

 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（）

Now in your another controller, you can access the data using getData()

在你的控制器，你可能需要修改一下：

In your controller, you may need to modify it a bit:

$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访问它（）

In your second controller, you can access it via Service.getData()

由于您使用同一个控制器两种观点，您需要使用如果状态检查路线独自获取数据。否则你可能最终再次射击的服务电话。

Since you're using same controller for both views, you need to use an if condition to check the route and get the data alone. Else you may end up firing the service call again.

这篇关于角视图不使用新的数据更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！