Javascript 角度视图不使用新数据更新

我是个有点棱角分明的新手，如果这是显而易见的，我很抱歉

我有一个后端，它返回一个对象数组。在检索它们之后，我将移动到下一页，并且需要为每个对象显示一个复选框。我可以成功地检索它们，因此我将浏览器的位置更改为下一页，在该页中应显示复选框，但不显示任何内容。我尝试使用$scope。$apply（）但是它抛出了一个错误，指出一个摘要已经发生了，但我认为这是正确的，因为我使用了ng click，它被包装在$scope中。$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>

})

在我的服务中：

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

我的应用程序配置：

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

    }
]);

---

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

您处于

角度范围内，因此不需要触发
$scope.$apply（）
。只有在超出角度范围时才需要

关于你的问题：

您正在返回服务中的承诺对象。因此，返回的数据仅在该控制器中可用。如果您要转到下一页，那么dat将不可用

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

为您服务：

 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
条件来检查
路线
，并单独获取数据。否则，您可能会再次触发服务调用。
即使两条路由具有相同的控制器名称，也不意味着它们相同

它们就像是同一类的两个独立实例，每个实例的数据总是不同的。因此，在一个地方设置它，在另一个地方使用它不是一个好办法

您需要的是在控制器之间共享数据的服务

只是想详细说明一下评论。。。您可以使用服务在控制器之间共享数据。退房

Ieghead.io是开始使用angualrjs的极好资源

这就是该服务的外观

app.service('productService', function() {
  var personList = [];

  var add = function(newObj) {
      personList.push(newObj);
  }

  var get = function(){
      return personList;
  }

  return {
    add: add,
    get: get
  };

});

上面是我如何在应用程序中的控制器之间共享数据的简单示例
我认为您没有使用相同的ng型号，请仔细检查您的ng控制器标记。您的意思是2

试试这个

if (!$scope.$$phase)
    $scope.$apply();

你能分享你路线的代码吗。。两条路线的控制器都不同。这不是控制员之间共享数据的方式在控制员回答中添加了我的路线和更多细节，解释得很好。非常感谢。谢谢你的资源我一定会去egghead.io
app.service('productService', function() {
  var personList = [];

  var add = function(newObj) {
      personList.push(newObj);
  }

  var get = function(){
      return personList;
  }

  return {
    add: add,
    get: get
  };

});

if (!$scope.$$phase)
    $scope.$apply();