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屋！