Separating js from angular controllers (do I create a directive for this?)

Question

I'm using a lot of built in angular directives such as ng-repeat with the html. I already separated the UI component to a different HTML file using ng-include. How do I separate out the js from the controller?

html (ui/hotkeys.ui.html)

<div ng-controller="AddManagerController as vm">

<button class="btn hotkey" ng-change="vm.changed($index)" ng-class="{'btn-danger': $index === 1, 'btn-info': $index === 2, 'btn-primary': $index === 3, 'btn-success': $index === 4, 'btn-warning': $index === 5, 'btn-inverse': $index === 6 }" ng-if="hotkeys !== null" ng-model="vm.credentials.groups[$index]" ng-repeat="hotkeys in vm.showGroups track by $index" tabindex="-1" type="button" style="margin-right: 4px" uib-btn-checkbox>
  <svg width="42" height="42" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <circle cx="20" cy="20" r="4" stroke="black" fill="white" ng-if="$index === 1 || $index === 3 || $index === 5" stroke-width="1"/>
    <circle cx="10" cy="10" r="4" stroke="black" fill="white" ng-if="$index ===4 || $index === 5 || $index === 6" stroke-width="1"/>
    <circle cx="10" cy="20" r="4" stroke="black" fill="white" ng-if="$index === 6" stroke-width="1"/>
    <circle cx="10" cy="30" r="4" stroke="black" fill="white" ng-if="$index === 2 || $index === 3 || $index === 4 || $index === 5 || $index === 6" stroke-width="1"/>
    <circle cx="30" cy="10" r="4" stroke="black" fill="white" ng-if="$index === 2 || $index === 3 || $index === 4 || $index === 5 || $index === 6" stroke-width="1"/>
    <circle cx="30" cy="20" r="4" stroke="black" fill="white" ng-if="$index === 6" stroke-width="1"/>
    <circle cx="30" cy="30" r="4" stroke="black" fill="white" ng-if="$index === 4 || $index === 5 || $index === 6" stroke-width="1"/>
  </svg>
</button>

</div>

This is the code I want to load from another js file instead of keeping all this in the controller.

/* ============ HOTBAR ============ */
var enableHotbar = true;
$document.bind('keypress', function (e) {
    //console.log(e.key);
    var key = String.fromCharCode(e.which);
    if (key == 1 || key == 2 || key == 3 || key == 4 || key == 5 || key == 6) {
        //alert(key);
        $scope.$broadcast('keypress', e, e.which);
    }
});
$scope.keyList = []; //["1","2", "3"];
$scope.$on('keypress', function (event, key) {
  var easyToReadKeyFromKeycode = String.fromCharCode(key.charCode);
  if (enableHotbar && (document.activeElement.id !== 'manager-phone') && (document.activeElement.id !== 'manager-name')) {
    vm.credentials.groups.forEach(function(group, index){
      if (easyToReadKeyFromKeycode === (index).toString()) {
        vm.credentials.groups[index] = !vm.credentials.groups[index];
      }
    })
  }
  $scope.keyList.push(String.fromCharCode(key.charCode));
  //console.log($scope.keyList);
  $scope.$apply();
});

  // add ng-focused and ng-blurred to any input element requiring numbers
    $scope.focused = function (e) {
      enableHotbar = false;
    }
    $scope.blurred = function (e) {
      enableHotbar = true;
    }

    // Manager Name disables keys 1 through 6
    $scope.keyPressed = function(e) {
      console.log(e);
      if ((e.keyCode >= 49 && e.keyCode <= 54)) {
        event.preventDefault();
      }
    }


/* ================================= */

Eduard Void · Accepted Answer · 2017-06-06 06:28:53Z

1

You have more options to separate JS from controller (to another controller honestly). If you want some singleton usage, you should create service for it. If you want some special functionality without separate view create a filter or directive. And if your special functionality has some view (HTML) create component. This is angularJS basic

answered Jun 6, 2017 at 6:28

Eduard Void

2,7041 gold badge16 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Separating js from angular controllers (do I create a directive for this?)

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related