Question

我有两个控制器。在ng-view中加载索引页面时使用第一个控制器，并从数据库中检索10个对象。这部分工作正常。在索引页面上提交表单时，将调用第二个控制器，该表单将过滤器提交给API并从数据库中检索10个新对象。我可以在客户端（console.log）中看到新对象，但由于某种原因，ng-repeat没有使用新数据刷新。我是棱角分明的新人，可能会遗漏一些简单的东西（我希望）。

/* Controllers */

angular.module('myApp.controllers', []).
  controller('IndexCtrl', function ($scope, $http, employees){
   employees.getAllEmployees().success(function(data){
      $scope.employees = data.employees;
    });
  }).
  controller('SearchFormCtrl', function ($scope, $http, employees) {
    $scope.submitForm = function(){
      employees.getFilteredEmployees($scope.form).success(function(data){
        console.log('data: ' + JSON.stringify(data.employees));
        $scope.employees = data.employees;
      });
    };
  });

/* Services */

angular.module('myApp.services', []).
  constant('version', 'Version: 0.1').
  factory('employees', function ($http) {
    return {
        getAllEmployees: function() {
            return $http.get('/api/employees');
        },
        getFilteredEmployees: function(form){
            return $http.post('/api/employees/filter/', form);
        }
    };
  });

索引部分（用翡翠写成）：

| <div ng-include src="'partials/searchForm'"></div>
div(ng-repeat='employee in employees')
    h3
        a(href='/viewEmployee/{{employee.GEID}}') {{employee.fullname}}
    h6
        span {{employee.CGH_OFFCR_TTL_DESC}} | {{employee.JOBTITLE}} | {{employee.JOB_FUNCTION}} | {{employee.CGH_WORK_COUNTRY}}

搜索表格部分（用翡翠写成）

div.well.well-sm
    form(name='myForm', novalidate, ng-controller='SearchFormCtrl').form-inline
        div.form-group
            select(ng-model='form.cband').form-control
                option C15+
                option C12-14
                option Other
        button(ng-click='submitForm()').btn.btn-primary Filter

Answer 1

下面是一个示例：

angular.module('myApp.controllers', []).
    controller('IndexCtrl', function ($scope, Employees){
          $scope.employees = Employees.employees;
          Employees.getEmployees();
    }).
    controller('SearchFormCtrl', function ($scope) {
        $scope.submitForm = function(){
            Employees.filterEmployees($scope.form);
        };
    }).
    service("Employees", function($http){
        var employees = {};
        return {
            getEmployees: function() {
                $http.get('/api/employees').
                    success(function(data, status, headers, config) {
                        angular.copy(data.employees, employees);
                    });
            },
            filterEmployees: function(form) {
                $http.post('/api/employees/filter/', form).
                    success(function(data){
                        angular.copy(data.employees, employees);
                    });
            },
            employees: employees
        }
    });

我认为你应该阅读范围并了解创建范围的人和方式。

ng-view，ng-if，ng-switch-when，ng-include，任何控制器和您的自定义指令（可选）都可以创建范围。此外，ng-repeat创建了隔离范围，但这是一种特殊情况。

解决问题的其他方法是使用事件（$ on，$ broadcast，$ emit http://docs.angularjs.org/api/ng。$ rootScope.Scope）。

API调用新数据后，Angular视图不会更新

1 个答案: