У меня есть проект, в котором мы используем множество директив angular ui-select. Использование ui-select стандартизировано, и единственная разница между различными точками, которые мы используем, заключается в шаблоне ui-select-choice и службе, используемой для получения результатов. Я пытаюсь написать директиву Picker, которая обертывает ui-select. Проблема, с которой я сталкиваюсь, заключается в включении шаблона ui-select-choice.
Вот директива, которую я написал.
registerDirective("picker", ["$injector", ($injector): IDirective => {
return {
restrict: "E",
templateUrl: "/Scripts/App/Views/Picker.html",
transclude: true,
scope: { model: "=model", sourceName: "=sourceName" },
link: ($scope: interfaces.IPickerScope, $: JQuery, attrs: ng.IAttributes) => {
var service = <services.IPickerService>$injector.get($scope.sourceName + "Service");
$scope.fetchResults = (filter: string) => {
service.pickerSearch(filter).then((response: any[]) => {
$scope.results = response;
});
};
}
};
}]);
Директивный вид:
<ui-select ng-model="$parent.model" reset-search-input="false">
<ui-select-match placeholder="Enter Item Name"><span ng-bind-html="$select.selected.name"></span></ui-select-match>
<ui-select-choices repeat="item in results"
refresh="fetchResults($select.search)"
refresh-delay="1000">
<div ng-transclude>
</div>
</ui-select-choices>
And here is an example usage of the directive:
<picker source-name="'plu'" model="selectedItem">
<span ng-bind-html="item.formattedName | highlight: $select.search"></span>
<small ng-show="item.used"><em>(already in use)</em></small>
</picker>
Я все еще изучаю входы и выходы angular, и это мой первый эксперимент с включением. Я заметил, что средство выбора использует включенный шаблон, но ни одна из переменных области не устанавливается. Я почти уверен, что это проблема области, связанная с тем, как ведут себя трансклюзия и область действия. Я изучил использование функции компиляции и переноса, но, похоже, не совсем понял, где мне нужно быть с этим.