从外部 angular 控制器访问变量
Access an variable from outside angular controller
我将 timetable.js 与 angular 路由器和 firebase 一起用于后端。我的代码如下所示:
这是 html 文件,angular 路由到:
<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');
};
});
我现在要做的是 运行 timetable.addEvent() 在该控制器之外运行。
我希望有人理解我正在尝试做的事情并且可以帮助我。
谢谢!
如何使用 angular 执行此操作的示例。我所做的只是创建一个快速而肮脏的 fiddle
,将您的代码放入指令中。在指令中,我添加了一个 addEvent
按钮,现在每次都创建相同的事件。您需要更新它以接收添加事件所需的输入(我将在今天晚些时候更新 fiddle 以向您展示如何执行此操作)。
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');
}
}
我将 timetable.js 与 angular 路由器和 firebase 一起用于后端。我的代码如下所示:
这是 html 文件,angular 路由到:
<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');
};
});
我现在要做的是 运行 timetable.addEvent() 在该控制器之外运行。
我希望有人理解我正在尝试做的事情并且可以帮助我。
谢谢!
如何使用 angular 执行此操作的示例。我所做的只是创建一个快速而肮脏的 fiddle
,将您的代码放入指令中。在指令中,我添加了一个 addEvent
按钮,现在每次都创建相同的事件。您需要更新它以接收添加事件所需的输入(我将在今天晚些时候更新 fiddle 以向您展示如何执行此操作)。
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');
}
}