AngularJS 在数据加载时从控制器调用指令函数 [英] AngularJS call directive function from the controller on data load
问题描述
我有一个指令函数 scope.automaticallySelectClosingTime()
.它采用第一个选择的下拉值的值,并在第二个选择的下拉列表中创建一个时间列表.它在 ng-change
上触发.
I have a directive function scope.automaticallySelectClosingTime()
. It takes the value of first selected dropdown value and creates a list of time on the second select drop-down. It triggers on ng-change
.
指令:
.directive('closingTimeSync', function() {
return {
template: `<md-select ng-disabled="time.uiStoreOpen === false" ng-model="openCloseSet[1]">
<md-option ng-repeat="uiTime in closingTimes" ng-value="uiTime.msValue">
{{::uiTime.display}}
</md-option>
</md-select>`,
replace: true,
transclude: true,
link: function(scope) {
scope.automaticallySelectClosingTime = function(msValue) {
scope.closingTimes = scope.uiAvailableTimes;
var dayMS = 86400000 - 1;
var remainingTimings = [];
var index = scope.closingTimes.map(function(obj) {
return obj.msValue;
}).indexOf(msValue);
index = (index === scope.uiAvailableTimes.length - 1) ? 1 : index + 1;
scope.closingTimes = scope.closingTimes.slice(index, scope.uiAvailableTimes.length);
if (msValue !== dayMS) {
remainingTimings = scope.uiAvailableTimes.slice(1, index - 1);
}
scope.closingTimes = scope.closingTimes.concat(remainingTimings);
};
}
};
})
控制器.
.controller('TestCtrl', function($scope) {
init();
// CREATE AVAIABLE TIMES
$scope.uiAvailableTimes = [];
$scope.uiAvailableTimes.push({
'msValue': 0,
'display': '12:00 Morning'
});
for (var msValue = 900000; msValue <= 85500000; msValue += 900000) { // 90.000ms = 15 min, 85.500.000ms = 11:45PM
$scope.uiAvailableTimes.push({
'msValue': msValue,
'display': moment(msValue).utc().format("h:mm A")
})
}
var dayMS = 86400000 - 1;
$scope.uiAvailableTimes.push({
'msValue': dayMS,
'display': '12:00 Midnight'
});
$scope.closingTimes = $scope.uiAvailableTimes;
function init() {
$scope.uiHoursOfOperation = [] // FROM SERVER
}
});
这很好用.但我也有来自服务器的数据.这意味着我的选择字段是通过 ng-model 预选的.
This works fine. But I've data that coming from the server as well. That means my select fields are preselected via ng-model.
如何从控制器调用 $scope.automaticallySelectClosingTime()
.也许在 init()
里面.这样它还可以在 init()
函数调用或页面加载时创建第二个下拉列表的时间列表.而且我不必在控制器中创建 $scope.uiAvailableTimes
.
How can I call the $scope.automaticallySelectClosingTime()
from the controller. Maybe inside init()
. So that it also creates the list of time to second drop-down on init()
function call or on page load. And I don't have to create $scope.uiAvailableTimes
in the controller.
工作示例:PLUNKER
Working Example: PLUNKER
推荐答案
尝试在指令中添加作用域参数,可以这样使用:
try to add scope parameter to the directive, you can use this:
.directive('closingTimeSync', function() {
return {
template: `<md-select ng-model="ngModel" ng-disabled="time.uiStoreOpen === false" ng-model="openCloseSet[1]">
<md-option ng-repeat="uiTime in closingTimes" ng-value="uiTime.msValue">
{{::uiTime.display}}
</md-option>
</md-select>`,
scope: {
ngModel: '='
},
replace: true,
transclude: true,
link: function(scope) {
scope.automaticallySelectClosingTime = function(msValue) {
scope.closingTimes = scope.uiAvailableTimes;
var dayMS = 86400000 - 1;
var remainingTimings = [];
var index = scope.closingTimes.map(function(obj) {
return obj.msValue;
}).indexOf(msValue);
index = (index === scope.uiAvailableTimes.length - 1) ? 1 : index + 1;
scope.closingTimes = scope.closingTimes.slice(index, scope.uiAvailableTimes.length);
if (msValue !== dayMS) {
remainingTimings = scope.uiAvailableTimes.slice(1, index - 1);
}
scope.closingTimes = scope.closingTimes.concat(remainingTimings);
};
}
};
})
并且您还需要在指令中添加 ng-model:
and also you will need to add the ng-model inside the directive:
<closing-time-sync ng-model="paramFromController"></closing-time-sync>
希望能解决您的问题.
这篇关于AngularJS 在数据加载时从控制器调用指令函数的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!