4

多くのAngular 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>

私はまだAngularのインとアウトを学んでおり、これがトランスクルージョンの最初の実験です。ピッカーがトランスクルードされたテンプレートを使用していることに気付きましたが、スコープ変数が設定されていません。これは、トランスクルードとスコープの動作に関連するスコープの問題であると確信しています。コンパイルとトランスクルード機能の使用を検討しましたが、必要な場所に到達できないようです。

4

1 に答える 1

0

scopeディレクティブの の指定を削除してください。指定すると、ディレクティブはそれ自体のスコープを作成し、トランスクルードされた部分は外側のスコープにバインドされます。ディレクティブのスコープを指定しない場合、ディレクティブとトランスクルードされた部分の両方が外側のスコープにバインドされ、探している動作が可能になります。

于 2015-09-28T20:42:13.757 に答える