Javascript 将ajax数据从控制器传递到指令
嘿，我已经建立了某种日期选择器+模式弹出窗口。 我希望系统以以下方式运行，用户选择2个日期：开始日期和结束日期，这定义了范围。然后用户单击GO按钮，GO按钮然后对服务器进行某种ajax调用，并检索需要显示的数据。 Go按钮是指令模板的一部分，现在我有几个问题：Javascript 将ajax数据从控制器传递到指令,javascript,jquery,angularjs,ajax,Javascript,Jquery,Angularjs,Ajax,嘿，我已经建立了某种日期选择器+模式弹出窗口。 我希望系统以以下方式运行，用户选择2个日期：开始日期和结束日期，这定义了范围。然后用户单击GO按钮，GO按钮然后对服务器进行某种ajax调用，并检索需要显示的数据。 Go按钮是指令模板的一部分，现在我有几个问题： 我应该在哪里进行ajax调用？在指令内还是在控制器内 如果我在控制器内进行ajax调用，我应该如何足够快地传递数据，以便在单击GO按钮时，我将在打开的弹出模式中看到数据 在将ajax数据从控制器传递到指令时，我有哪些选择 我附上以下指令
angular.module('directives', [])
.directive('datepicker', ['$timeout', function ($timeout) {
// Runs during compile
return {
scope: {
id: '@',
"class": '@',
onSelect: "&",
onSelectStartDate: '&',
onSelectEndDate: '&',
onSelectGoMode: '&',
collection: '=' // ajax data
},
restrict: 'E',
template: '<div id="{{id}}" class="{{class}}">' +
'<div id="date-start-wrapper" class="date-wrapper">' +
'<label for="datepicker-start" class="datepicker-lbl">From:</label>' +
'<div class="fieldWrapper">' +
'<input id="datepicker-start" type="date" placeholder="Select date" />' +
'<a class="calendar"></a>' +
'</div>' +
'</div>' +
'<div id="date-end-wrapper" class="date-wrapper">' +
'<label for="datepicker-end" class="datepicker-lbl">To:</label>' +
'<div class="fieldWrapper">' +
'<input id="datepicker-end" type="date" placeholder="Select date" />' +
'<a class="calendar"></a>' +
'</div>' +
'</div>' +
'<button id="GoBtn" class="btn btn-primary btn-md" >GO</button>' +
'<div id="blackout"></div>'+
'<div id="popup">'+
'<span class="close"></span>' +
'<h2>Enter Content</h2>' +
'<span>{{collection}}</span>'+
'<button id="okbtn" class="btn btn-success btn-md" >ok</button>' +
'<button id="cancelbtn" class="btn btn-danger btn-md" >cancel</button>' +
'</div>' +
'</div>'
,
replace: true,
link: function ($scope, iElm, iAttrs, controller) {
console.log('directive iAttrs', iAttrs);
var Gobtn = iElm.find('button');
$scope.selectStartDate = function (time) {
if (angular.isFunction($scope.onSelectStartDate())) {
$scope.onSelectStartDate()(time);
}
}
$scope.selectEndDate = function (time) {
if (angular.isFunction($scope.onSelectEndDate())) {
$scope.onSelectEndDate()(time);
}
}
//define blackout and close click callbacks.
$("#blackout, .close").click(function () {
$("#blackout").removeClass("visable");
$("#popup").removeClass("visable");
});
Gobtn.click(function () {
console.log('$scope.onSelectGoMode()', $scope.onSelectGoMode());
if (angular.isFunction($scope.onSelectGoMode())) {
$scope.onSelectGoMode()();
}
$("#blackout").addClass("visable");
$("#popup").addClass("visable");
});
var actions = [$scope.selectStartDate, $scope.selectEndDate];
$(".date-wrapper").each(function (index) {
console.log('directive index', index);
console.log('actions:', actions);
$input = $(this).find('input');
$btn = $(this).find('.calendar');
console.log('input', $input[0]);
console.log('btn', $btn[0]);
var counter = 0;
var updateTime = $scope.selectDate;
$input.attr('type', 'text');
var pickerStart = new Pikaday({
field: $input[0],
trigger: $btn[0],
container: $(this)[0],
format: 'DD/MM/YYYY',
firstDay: 1,
onSelect: actions[index]
});
$btn.show();
counter++;
});
}
};
}]);
由于您有一个独立运行的日期选择器和范围选择器以及一个操作按钮，因此您可以继续在指令函数中进行ajax调用。因为您的指令将为您的模板创建一个新的范围，并且您的所有数据都将在该范围内随时可用 我还建议将该指令配置为接受URL作为参数以及其他参数，如id、collection等。因此，您可以重复使用相同的 至于模态，您可以在指令本身中注入模态服务
angular.module('directives', [])
.directive('datepicker', ['$timeout','modalService', function ($timeout,modalService) {
// Runs during compile
return {
scope: { ........
.............
.............
Gobtn.click(function () {
.............
..............
//Call modal service here...
modalService.showModel(); // just an sample...call replace with you modal implementation please
});
..............
如果您想与父控制器进行数据通信，您可以使用指令中的 然后在您的控制器中捕获发射消息，如下所示
angular.module('eventExample', [])
.controller('EventController', ['$scope', function($scope) {
$scope.count = 0;
$scope.$on('MyEvent', function(event, args) {
var anyThing = args.any;
// do what you want to do
});
}]);
您还可以使用targetScope和currentScope为发射或广播事件添加要侦听的特定作用域。。请参阅因为您使用的是指令，并且所有数据都可以在指令范围内重新获得，所以您自己在指令范围内进行api调用，并且还使用modal service inside指令将其弹出到当前视图中。问题是，在我单击GO btn之后，我将在指令中操作ajax调用，但当我为弹出窗口模式单击OK时，我需要操作另一个ajax调用，该调用将更新整个屏幕，其数据位于cont中