angularjs - Angular Directive with ui-select and transclude -
i have project using lot of angular ui-select directives. usage of ui-select standardized , difference between various points use ui-select-choice template , service used fetch results. i'm trying write picker directive wraps ui-select. problem i'm encountering transcluding ui-select-choice template.
here directive i've written.
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; }); }; } }; }]);
the directive view:
<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 example usage of 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>
i'm still learning in's , out's of angular , first experiment transcluding. i've noticed picker using transcluded template, none of scope variables being set. i'm pretty sure scope problem related way transclude , scope behave. i've looked using compile , transclude function can't seem quite need that.
remove specification of scope
directive. if specify it, directive create scope of it's own , transcluded part bound outter scope. if don't specify scope directive, both directive , transcluded part bound outter scope, allowing behaviour you're looking for.
Comments
Post a Comment