Angularjs каскадные выпадающие

Проблема с вашим сервисом в два раза:

Во-первых, нет способа вызвать услугу. Вы ввели это хорошо, но что теперь? Подумайте о своей службе как API; это не хорошо, просто имея ссылку на него где-то, вы должны иметь возможность использовать его. Я бы изменил следующее:

var myApp = angular.module("myApp", []);    
myApp.service('getCompanies', ["$http", function($http) {
  this.currentSettings = "Hello";
  $http.post('CurrentSettings/GetCompanies')
    .then(function(response) {
      var response = $.parseJSON(response.data);
      this.currentSettings = response;
    });    
}]);

myApp.controller("companyController", ["$scope", "getCompanies", 
function($scope, getCompanies) {
  $scope.currentSettings = getCompanies.currentSettings;
}]);

Обратите внимание на несколько вещей:

1. Вам нужно явно ввести $ http в вашу службу.
2. Я указываю имена служб, которые я вставляю как часть массива, который включает эту функцию. Это фактически позволяет вам назвать параметры, которые вы хотите, и считается лучшей практикой.
3. Служба не использует $ scope напрямую. Вместо этого он делает доступным поле для клиентов службы. Этот клиент (контроллер в этом случае) может затем делать со значением, что он хочет, включая присвоение ему поля $ scope.
4. Контроллер считывает это поле из службы. Он также может вызывать любые функции, которые вы указали, что делает сервис API, как я упоминал ранее.

Вторая проблема - время. Обратите внимание, что я использовал супер-оригинальное значение "Hello" для инициализации поля службы.

Значение, которое вы получаете от службы, зависит от того, считывает ли контроллер значение после вызова контроллера MVC.

Чтобы исправить это, служба может выставить второе поле, чтобы указать, что список компаний полностью загружен, но это действительно смещает проблему, а не исправляет ее.

Вам нужна функция, которая возвращает обещание. Если значение уже загружено, обещание немедленно устраняется. Если нет, он возвращает обещание, которое вернется после завершения вызова $ http.

Вот модифицированный код:

var myApp = angular.module("myApp", []);
myApp.service('companiesService', ['$http', '$q', function($http, $q) {
  var currentSettings = null;

  this.getList = function() {
    var def = $q.defer()
    if (currentSettings) {
      def.resolve(currentSettings);
    } else {
      $http.get('CurrentSettings/GetCompanies')
        .then(function(response) {
          var response = response.data;
          currentSettings = response;
          def.resolve(currentSettings);
        });
    }
    return def.promise;
  }
}]);

myApp.controller('companyController', ['$scope', 'companiesService',
  function($scope, companiesService) {
    $scope.currentSettings = '';
    companiesService.getList().then(function(value) {
      $scope.currentSettings = value;
    });
  }
]);

Это становится немного сложнее, потому что вы должны использовать обещания, но это то, что нужно отметить:

1. Я изменил имя службы, чтобы сделать ее более общей. Теперь он может предложить ряд связанных с компанией функций.
2. currentSettings больше не добавляется к этому в службе, а вместо этого становится обычной (частной) переменной. Вызывающий код может читать только его, вызывая функцию getList.
3. getList возвращает обещание. Обетование немедленно разрешается, если назначено текущее задание. Если нет, он разрешается только после получения значения из веб-службы.
4. Контроллер вызывает getList и присваивает значение в поле $ scope в функции then.