Change transclusion to named transclusion

Author: pkempenaers

CHANGELOG.md

@@ -1,6 +1,11 @@
 Version numbers correspond to `bower.json` version
 
-#2.0.0-beta.4
+# 2.0.0-beta.5 & 2.0.0-beta.6
+
+## Features
+- Added support for transcluded custom toggle-dropdown element
+
+# 2.0.0-beta.4
 
 Small bugFix
 

src/app/component/angularjs-dropdown-multiselect.directive.js

@@ -12,7 +12,9 @@ export default function dropdownMultiselectDirective() {
 			translationTexts: '=',
 			disabled: '=',
 		},
-		transclude: true,
+		transclude: {
+			toggleDropdown: '?toggleDropdown',
+		},
 		controller,
 		templateUrl: 'app/component/angularjs-dropdown-multiselect.html',
 	};

src/app/component/angularjs-dropdown-multiselect.html

@@ -1,14 +1,14 @@
 <div class="multiselect-parent btn-group dropdown-multiselect"
      ng-class="{open: open}">
-     <ng-transclude ng-click="toggleDropdown()">
+     <div ng-transclude="toggleDropdown" ng-click="toggleDropdown()">
       <button ng-disabled="disabled"
               type="button"
               class="dropdown-toggle"
               ng-class="settings.buttonClasses"
               >
         {{getButtonText()}}&nbsp;<span class="caret"></span>
       </button>
-    </ng-transclude>
+    </div>
   <ul class="dropdown-menu dropdown-menu-form"
       ng-if="open"
       ng-style="{display: open ? 'block' : 'none', height : settings.scrollable ? settings.scrollableHeight : 'auto', overflow: 'auto' }">

src/app/main/main.template.html

@@ -981,15 +981,15 @@ <h3>Code</h3>
 		<div uib-accordion-group heading="Custom trigger element using transclusion">
 			<div class="row">
 				<div class="col-xs-12">
-					Example to show that you can replace the button with a custom element
+					Example to show that you can replace the button with a custom element.
 				</div>
 			</div>
 			<div class="row">
 				<div class="col-xs-12 col-sm-6">
 					<h3>Demo</h3>
 					<div class="well">
 						<div ng-dropdown-multiselect="" options="transclusionData" selected-model="transclusionModel" extra-settings="transclusionSettings">
-							<span class="custom-trigger">My Custom trigger</span>
+							<toggle-dropdown><span class="custom-trigger">My Custom trigger</span></toggle-dropdown>
 						</div>
 					</div>
 				</div>
@@ -1004,7 +1004,7 @@ <h3>Code</h3>
 					<div hljs language="javascript">
 // HTML
 <div ng-dropdown-multiselect="" options="transclusionData" selected-model="transclusionModel" extra-settings="transclusionSettings">
-	<span class="custom-trigger">My Custom trigger</span>
+	<toggle-dropdown><span class="custom-trigger">My Custom trigger</span></toggle-dropdown>
 </div>
 
 $scope.transclusionModel = [];