Как кормить подшаблон с данными в AngularJS?

Question

У меня есть 4 типа подшаблонов, которые могут появиться в моем родительском шаблоне. Допустим, это разные типы ввода в форме. Я получаю некоторые данные с сервера и хочу передать эти шаблоны (выберите поле ввода с опциями) полученными данными.

Я бы использовал что-то вроде этого:

<ng-include src="'./path/to/template/input/' + vm.data.type + '.html'"></ng-include>

Но я хочу использовать этот шаблон больше раз с разными данными для него. Как это:

<select>
      <option ng-repeat="option in myOptionsData">{{option.text}}</option>
</select>

Я вроде должен быть в состоянии вызвать этот кусок пользовательского интерфейса как функцию с параметром (myOptionsDataсверху) для данных. Как это решается правильно? Я читал о новом контроллере, где данные будут передаваться службой, но мне кажется очень проблематичным создание службы для каждого типа подшаблона. Я что-то пропустил?

Answer 1

Я нашел ответ в этом посте. Решение состоит в том, чтобы дать ng-includeатрибут загрузки с такими данными:

<ng-include src="'./path/to/template/input/' + vm.data.type + '.html'" onload="myOptionsData=vm.someData"></ng-include>

Это прекрасно работает, я бы хотел знать, есть ли лучшее решение.

Answer 2

Это довольно просто, вы можете использовать в своем HTML что-то вроде:

<ng-include src="vm.resolveUrl(vm.data.type)">
</ng-include>

Так что вы можете сделать это в вашем контроллере:

$scope.resolveUrl = function(param) {
    return "./path/to/template/input/" + param + ".html"
}

Более правильным способом решения этой проблемы является фрагмент кода, который легче поддерживать, а также более читаемый. Итак, дайте мне знать, если это работает для вас!