Доступ к переменной из внешнего углового контроллера

Question

Я использую timetable.js вместе с угловым маршрутизатором и firebase для бэкэнд. Мой код выглядит следующим образом:

Это файл HTML, что угловые маршруты к:

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

Это файл, в котором я обрабатывать все мои функции от этого маршрутизатора:

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

Что я m теперь пытается сделать это, чтобы запустить этот расписание.addEvent() функция вне этого контроллера.

Я надеюсь, что кто-то понял, что я пытаюсь сделать и могу мне помочь.

Спасибо!

Answer 1

Пример того, как можно использовать угловые для этого. Все, что я сделал, это создать быстрый и грязный fiddle, который помещает ваш код в директиву. В директиве я добавил кнопку addEvent, которая теперь просто создает одно и то же событие каждый раз. Вам нужно будет обновить это, чтобы принимать входные данные, необходимые для добавления события (сегодня я обновлю скрипку, чтобы показать вам, как вы могли это сделать).

Fiddle показывая все это: http://jsfiddle.net/ncapito/kkxphvg7/

Директива Определение

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>', 

    }; 
    }]); 

Директива Контроллер:

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

    }