Question

我有一个项目，我们使用了很多有角度的ui-select指令。 ui-select的使用是标准化的，我们使用它的各个点之间的唯一区别是ui-select-choice模板和用于获取结果的服务。我试图写一个包装ui-select的Picker指令。我遇到的问题是转换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>

以下是该指令的示例用法：

<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>

我仍然在学习角度的内外，这是我第一个有抄袭的实验。我注意到选择器正在使用转换模板，但没有设置任何范围变量。我很确定这是与transclude和scope行为方式相关的范围问题。我已经研究过使用编译和转换函数，但似乎无法达到我需要的位置。

Answer 1

删除指令的scope规范。如果您指定它，该指令将创建它自己的范围，并且被转换的部分将绑定到外部范围。如果没有为指令指定范围，则指令和transcluded部分都将绑定到outter范围，从而允许您正在寻找的行为。

具有ui-select和transclude的Angular Directive

1 个答案: