API調用新數據后角度視圖不會更新

我有兩個控制器。當在ng-view中加載索引頁面時使用第一個控制器，並從數據庫中檢索10個對象。這部分工作正常。當在索引頁面上提交表單時調用第二個控制器，該表單向API提交過濾器，並從數據庫中檢索10個新對象。我可以在客戶端看到新的對象（console.log），但由於某些原因，ng-repeat不會使用新數據進行刷新。我是新來的角，可能缺少一些簡單的東西（我希望）。API調用新數據后角度視圖不會更新

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

來源

2013-11-04 Jason Gelinas

兩個控制器中的'$ scope'可能不同。你可以用'console.log（$ scope。$ id）'來測試它。 Angular中的範圍對於控制器或指令是分層的。如果你可以提供更多的代碼（例如'partials/searchForm'），更具體地說包含'ng-controller'的元素，我們可能會更具體。 –

@NikosParaskevopoulos你是對的。我幾分鐘前也意識到這一點。 $範圍是不同的。我想我需要使用服務作爲控制器之間的橋樑。將API數據庫調用放在服務本身中，還是僅使用服務來保存「過濾器」屬性並讓控制器進行API數據庫調用會更有意義？ –

我會在服務中打電話。實際上，我會建議一個'員工'服務，知道如何處理和處理這兩個調用，'api/employees'和'api/filter'。 –

這裏是一個示例如何才能樣子：

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

來源

2013-11-04 16:05:25

API調用新數據后角度視圖不會更新

回答

相關問題