Move more code to their specific directives. Using scope events for notifications

Author: dimirc

src/bootstrap/select-multiple.tpl.html

@@ -7,7 +7,7 @@
            autocapitalize="off" 
            spellcheck="false" 
            class="ui-select-search input-xs"
-           placeholder="{{$select.getPlaceholder()}}"
+           placeholder="{{$selectMultiple.getPlaceholder()}}"
            ng-disabled="$select.disabled"
            ng-hide="$select.disabled"
            ng-click="$select.activate()"

src/select2/select-multiple.tpl.html

@@ -16,7 +16,7 @@
         aria-label="{{ $select.baseTitle }}"
         aria-activedescendant="ui-select-choices-row-{{ $select.generatedId }}-{{ $select.activeIndex }}"
         class="select2-input ui-select-search"
-        placeholder="{{$select.getPlaceholder()}}"
+        placeholder="{{$selectMultiple.getPlaceholder()}}"
         ng-disabled="$select.disabled"
         ng-hide="$select.disabled"
         ng-model="$select.search"

src/uiSelectController.js

@@ -61,9 +61,10 @@ uis.controller('uiSelectCtrl',
   ctrl.activate = function(initSearchValue, avoidReset) {
     if (!ctrl.disabled  && !ctrl.open) {
       if(!avoidReset) _resetSearchInput();
-      if (ctrl.focusser) ctrl.focusser.prop('disabled', true); //Will reactivate it on .close()
+
+      $scope.$broadcast('uis:activate');
+
       ctrl.open = true;
-      ctrl.activeMatchIndex = -1;
 
       ctrl.activeIndex = ctrl.activeIndex >= ctrl.items.length ? 0 : ctrl.activeIndex;
 
@@ -261,24 +262,19 @@ uis.controller('uiSelectCtrl',
           }
         }
 
+        $scope.$broadcast('uis:select', item);
+
         var locals = {};
         locals[ctrl.parserResult.itemName] = item;
 
-        if(ctrl.multiple) {
-          ctrl.selected.push(item);
-          ctrl.sizeSearchInput();
-        } else {
-          ctrl.selected = item;
-        }
-
         $timeout(function(){
           ctrl.onSelectCallback($scope, {
             $item: item,
             $model: ctrl.parserResult.modelMapper($scope, locals)
           });
         });
 
-        if (!ctrl.multiple || ctrl.closeOnSelect) {
+        if (ctrl.closeOnSelect) {
           ctrl.close(skipFocusser);
         }
         if ($event && $event.type === 'click') {
@@ -294,12 +290,9 @@ uis.controller('uiSelectCtrl',
     if (ctrl.ngModel && ctrl.ngModel.$setTouched) ctrl.ngModel.$setTouched();
     _resetSearchInput();
     ctrl.open = false;
-    if (!ctrl.multiple){
-      $timeout(function(){
-        ctrl.focusser.prop('disabled', false);
-        if (!skipFocusser) ctrl.focusser[0].focus();
-      },0,false);
-    }
+
+    $scope.$broadcast('uis:close', skipFocusser);
+
   };
 
   ctrl.setFocus = function(){
@@ -334,12 +327,6 @@ uis.controller('uiSelectCtrl',
       return isLocked;
   };
 
-  ctrl.getPlaceholder = function(){
-    //Refactor single?
-    if(ctrl.multiple && ctrl.selected.length) return;
-    return ctrl.placeholder;
-  };
-
   var sizeWatch = null;
   ctrl.sizeSearchInput = function() {
 

src/uisMultipleDirective.js

@@ -33,6 +33,11 @@ uis.directive('uisMultiple', ['uiSelectMinErr', function(uiSelectMinErr) {
 
       };
 
+      ctrl.getPlaceholder = function(){
+        //Refactor single?
+        if($select.selected.length) return;
+        return $select.placeholder;
+      };
 
 
     }],
@@ -139,6 +144,15 @@ uis.directive('uisMultiple', ['uiSelectMinErr', function(uiSelectMinErr) {
         $select.selected = ngModel.$viewValue;
       };
 
+      scope.$on('uis:select', function (event, item) {
+        $select.selected.push(item);
+        $select.sizeSearchInput();
+      });
+
+      scope.$on('uis:activate', function () {
+        $select.activeMatchIndex = -1;
+      });
+
       scope.$watch('$select.disabled', function(newValue, oldValue) {
         // As the search input field may now become visible, it may be necessary to recompute its size
         if (oldValue && !newValue) $select.sizeSearchInput();

src/uisSingleDirective.js

@@ -49,6 +49,21 @@ uis.directive('uisSingle', ['$timeout','$compile', function($timeout, $compile)
         $select.selected = ngModel.$viewValue;
       };
 
+      scope.$on('uis:select', function (event, item) {
+        $select.selected = item;
+      });
+
+      scope.$on('uis:close', function (event, skipFocusser) {
+        $timeout(function(){
+          $select.focusser.prop('disabled', false);
+          if (!skipFocusser) $select.focusser[0].focus();
+        },0,false);
+      });
+
+      scope.$on('uis:activate', function () {
+        focusser.prop('disabled', true); //Will reactivate it on .close()
+      });
+
       //Idea from: https://github.com/ivaynberg/select2/blob/79b5bf6db918d7560bdd959109b7bcfb47edaf43/select2.js#L1954
       var focusser = angular.element("<input ng-disabled='$select.disabled' class='ui-select-focusser ui-select-offscreen' type='text' id='{{ $select.focusserId }}' aria-label='{{ $select.focusserTitle }}' aria-haspopup='true' role='button' />");
       $compile(focusser)(scope);