Angular 视图未更新新数据

Question

我是一个 Angular 新手，很抱歉，如果这很明显。

我有一个 returns 对象数组的后端。检索它们后，我移至下一页，我需要为每个对象显示一个复选框。我可以成功检索它们，所以我将浏览器的位置更改为应该显示复选框但未显示任何内容的下一页。我尝试使用 $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>

在我的控制器中： 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>

我的服务服务（错误名称）：

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

    }
]);

我正在使用 {[{ }]} 进行插值，否则它会 class 使用 Blade 语法

Answer 1

您在 angular 范围内，因此不需要触发 $scope.$apply()。仅当您超出 angular 范围时才需要它。

Regarding your issue:

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

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

为您服务：

 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 条件来检查 route 并单独获取数据。否则您最终可能会再次触发服务调用。

Answer 2

即使两个路由的控制器名称相同，也不意味着它们相同..

它们就像是相同 class 的两个独立实例，每个实例的数据总是不同的。因此，将它设置在一个地方并在另一个地方使用它并不是可行的方法。

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

只是为了详细说明评论...您可以使用服务在控制器之间共享数据。查看 this video from egghead.io

egghead.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
  };

});

以上是我如何在我的应用程序中的控制器之间共享数据的简化示例

Answer 3

我认为你没有使用相同的 ng-model，仔细检查你的 ng-contoller tag.And 你的意思是 2

试试这个

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

Angular 视图未更新新数据

Angular View Not Updating with New Data

javascript

angularjs

angularjs-scope

angularjs-ng-repeat

angularjs-routing