Угловая директива с ui-select и transclude

У меня есть проект, в котором мы используем множество директив 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, и это мой первый эксперимент с включением. Я заметил, что средство выбора использует включенный шаблон, но ни одна из переменных области не устанавливается. Я почти уверен, что это проблема области, связанная с тем, как ведут себя трансклюзия и область действия. Я изучил использование функции компиляции и переноса, но, похоже, не совсем понял, где мне нужно быть с этим.


person DanielC    schedule 29.05.2015    source источник


Ответы (1)


Удалите спецификацию scope для директивы. Если вы укажете его, директива создаст собственную область действия, а включенная часть будет привязана к внешней области действия. Если вы не укажете область действия для директивы, и директива, и включённая часть будут привязаны к внешней области действия, что позволит вести себя так, как вы ищете.

person Fernando Pinheiro    schedule 28.09.2015