Access an variable from outside angular controller

Question

I'm using timetable.js together with an angular router and firebase for the backend. My code looks like this:

That is the html file that angular routes to:

<div class="timetable" ng-init="initTimetable()"></div>

That's the file where I handle all my functions from that router:

myApp.controller('myController', function($scope) {

    $scope.initTimetable = function() {
        var timetable = new Timetable();
        timetable.setScope(8, 14); 

        timetable.addLocations(['Place 1', 'Place 2', 'Place 3']);

        timetable.addEvent('Homework', 'Place 1', new Date(2016,9,10,11,45), new Date(2016,9,10,12,30));

        var renderer = new Timetable.Renderer(timetable);
        renderer.draw('.timetable');
     };
});

What I'm now trying to do is to run that timetable.addEvent() function outside that controller.

I hope somebody understood, what I'm trying to do and can help me.

Thanks!

Answer 1

Example of how you could use angular to do this. All I did was create a quick and dirty fiddle that puts your code in a directive. In the directive I added an addEvent button that for now just creates the same event each time. You would need to update this to take in the inputs required to add an event (i'll update the fiddle later today to show you how you could do this).

Fiddle showing all of this: http://jsfiddle.net/ncapito/kkxphvg7/

Directive Definition

  angular.module('myApp').directive('timetable', [function() {
    return {
      scope: {
        locations: '='
      },
      restrict: 'E',
      replace: true,
      controller: TimetableController,
      template: '<div><div class="timetable"></div><button ng-click="addEvent()">Add Event</button></div>',

    };
  }]);

Directive Controller:

 function TimetableController($scope) {
    var timetable = new Timetable();
    var renderer = new Timetable.Renderer(timetable);

    init();
    $scope.addEvent = addEvent;

    var idx = 3;

    function addEvent() {
      var newLocation = 'Place ' + ++idx;
      $scope.locations.push(newLocation);

      //add if new
      timetable.addLocations([newLocation]);
      timetable.addEvent(
        'Homework' + idx, newLocation, //need to add a ui to collect this
        new Date(2016, 9, 10, 11, 45), //need to add a ui to collect this
        new Date(2016, 9, 10, 12, 30) //need to add a ui to collect this
      );

      render();
    }

    function init() {
      timetable.setScope(8, 14);
      timetable.addLocations($scope.locations);
      timetable.addEvent('Homework', $scope.locations[0], new Date(2016, 9, 10, 11, 45), new Date(2016, 9, 10, 12, 30));

      render();
    }

    function render() {
      renderer.draw('.timetable');
    }

  }