Search code examples
javascriptangularjsangularjs-directiveangularjs-ng-transclude

I got TypeError: transclude is not a function and also can't able to bind select options value in select2 in angularjs

I got one plunker code for multi select2 drop down using angularjs. It works fine except the option value is not bound in select option while running with my code.

I have linked the plunker demo below but the code in plunker executed fine without any errors but somehow I got this error while run with my code...

console error:

**"TypeError: transclude is not a function"**

enter image description here

plunker link:

http://plnkr.co/edit/juqoNOt1z1Gb349XabQ2?p=preview

and here is the include this demo module with my module like below,

 var gateApp = angular.module('gateApp', ["demo","angucomplete"])

i am battling with this error anyone can give me suggestion.

For your reference Rendered HTML code in console:

<ul class="ui-select-choices ui-select-choices-content select2-results ng-scope" repeat="color in availableColors | filter:$select.search">
<li class="ui-select-choices-group" ng-class="{'select2-result-with-children': $select.choiceGrouped($group) }">  
 <div ng-show="$select.choiceGrouped($group)" class="ui-select-choices-group-label select2-result-label ng-binding ng-hide" ng-bind="$group.name">
</div>
<ul role="listbox" id="ui-select-choices-0" ng-class="{'select2-result-sub': $select.choiceGrouped($group),   'select2-result-single': !$select.choiceGrouped($group) }" class="select2-result-single"><!-- ngRepeat: color in $select.items -->

<!-- ngIf: $select.open -->
<li role="option" id="ui-select-choices-row-0-0" class="ui-select-choices-row ng-scope select2-highlighted" ng-class="{'select2-highlighted': $select.isActive(this), 'select2-disabled': $select.isDisabled(this)}" ng-repeat="color in $select.items" ng-if="$select.open" ng-click="$select.select(color,false,$event)"><div class="select2-result-label ui-select-choices-row-inner" uis-transclude-append="">
</div> 
</li><!-- end ngIf: $select.open -->
<!-- end ngRepeat: color in $select.items -->
<!-- ngIf: $select.open -->
<li role="option" id="ui-select-choices-row-0-1" class="ui-select-choices-row ng-scope" ng-class="{'select2-highlighted': $select.isActive(this), 'select2-disabled': $select.isDisabled(this)}" ng-repeat="color in $select.items" ng-if="$select.open" ng-click="$select.select(color,false,$event)">

</li><!-- end ngIf: $select.open --><!-- end ngRepeat: color in $select.items --><!-- ngIf: $select.open -->
</ul>
</li>
</ul>
Solution

  • The version of angular is probably too old. I had this same issue when using v1.2.16 and ui-select requires 1.2.18 minimum.

    https://github.com/angular-ui/ui-select/wiki/Getting-Started