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!

Are you caling timetable.addEvent() from inside of angular (service, controller, directive)? — Nix
– Nix, Commented Sep 19, 2016 at 17:18
What I tried was to just call the timetable variable from another js file, which of cause didn't worked out. — André Kuhlmann
– André Kuhlmann, Commented Sep 19, 2016 at 17:22
you can use timetable.addEvent() in directive by passing values from dom — ojus kulkarni
– ojus kulkarni, Commented Sep 19, 2016 at 17:25
You are doing way too much in your controller Put the logic for the timetable in a service (so it can be used by other modules and controllers throughout your application), and then leverage that service from this controller. The controller should then only be leveraged by the view. Trying to do otherwise will very likely lead you to an unscalable mess. — btberry
– btberry, Commented Sep 19, 2016 at 17:35
@ojuskulkarni That is not working either, because I need to get my values of firebase. But thanks for your answer. — André Kuhlmann
– André Kuhlmann, Commented Sep 19, 2016 at 17:37

Nix · Accepted Answer · 2016-09-19 17:43:56Z

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');
    }

  }

Collectives™ on Stack Overflow

Access an variable from outside angular controller

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related