Проблемы с контроллером и директивой AngularJS

Question

Я продолжаю изучать angularjs в течение последних нескольких дней, особенно в отношении директив.

У меня есть сценарий, в котором мне нужно загрузить список записей, причем каждый из них относится к категории (5 категорий в раскрывающемся списке). Я создал директиву для обработки события «change» для каждого из них и сделал это так, чтобы их области не перекрывались. Как вы можете видеть в журналах консоли, каждый раз, когда вы выберете элемент из раскрывающегося списка, он не зависит от других.

У меня есть два вопроса:

1. Как загружать категории ТОЛЬКО РАЗ от внешнего источника. К быть более конкретным, я хочу только позвонить practiceFactory.getCategories() только один раз.

2. Является ли моя структура кода на правильном пути относительно углового?

Вот мой HTML:

<div data-ng-app="practiceApp"> 
    <h1>practiceAppController</h1> 
    <div data-ng-controller="practiceAppController"> 
     <p><select data-when-changed="saveCategory({{selectedCategoryId}})" data-ng-model="selectedCategoryId" data-ng-options="category.id as category.name for category in categories"></select></p> 
     <p><select data-when-changed="saveCategory({{selectedCategoryId}})" data-ng-model="selectedCategoryId" data-ng-options="category.id as category.name for category in categories"></select></p> 
     <p><select data-when-changed="saveCategory({{selectedCategoryId}})" data-ng-model="selectedCategoryId" data-ng-options="category.id as category.name for category in categories"></select></p> 
     <p><select data-when-changed="saveCategory({{selectedCategoryId}})" data-ng-model="selectedCategoryId" data-ng-options="category.id as category.name for category in categories"></select></p> 
     <p><select data-when-changed="saveCategory({{selectedCategoryId}})" data-ng-model="selectedCategoryId" data-ng-options="category.id as category.name for category in categories"></select></p> 
    </div> 
</div> 

Вот мой JS:

var practiceApp = angular.module('practiceApp', []); 

practiceApp.controller('practiceAppController', function($scope, practiceFactory) { 
}); 

practiceApp.factory('practiceFactory', function() { 
    var factory = {}; 

    factory.getCategories = function() { // async call here 
     console.log('getCategories() was called'); 
     var categories = [ 
      {id: 1, name: 'Food & Dining'}, 
      {id: 2, name: 'Hotel & Travel'}, 
      {id: 3, name: 'Shopping'}, 
      {id: 4, name: 'Health & Beauty'}, 
      {id: 5, name: 'Activities'} 
     ]; 
     return categories; 
    } 

    factory.getSelectedCategory = function() { // async call here 
     console.log('getSelectedCategory() was called'); 
     var selectedCategoryId = Math.floor((Math.random()*5)+1); 
     return selectedCategoryId; 
    } 

    return factory; 
}); 

practiceApp.directive('whenChanged', function(practiceFactory) { 
    return { 
     restrict: 'A', 
     scope: {}, 
     controller: function ($scope) { 
      $scope.selectedCategoryId = practiceFactory.getSelectedCategory(); 
      $scope.categories = practiceFactory.getCategories(); 

      $scope.saveCategory = function(categoryId) { 
       console.log(categoryId); 
      } 
     }, 
     link: function(scope, element, attribute) { 
       element.bind('change', function() { 
        scope.$apply(attribute.whenChanged); 
       }) 
     } 
    } 
}); 

Здесь вы сможете найти jsfiddle. http://jsfiddle.net/j45fN/

Answer 1

Going ответить на ваши вопросы назад ...

В ответ на # 2, я не рекомендую использовать завод, чтобы загрузить данные в вашей директиве. Такая логика должна выполняться в контроллере вашего модуля (не в контроллере любой директивы). В этом отношении другие заводские вызовы также должны быть удалены из вашей директивы.

Если вы сделаете это, это делает # 1 проще - вы можете просто позвонить practiceFactory.getCategories раз в practiceAppController и передать результат в сферу вашей директивы с помощью двунаправленного связывания (scope: { categories: '=' }).