Question

我有一个指令函数scope.automaticallySelectClosingTime()。它采用第一个选定下拉值的值，并在第二个选择下拉列表中创建时间列表。它会在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预先选择的。

如何从控制器调用$scope.automaticallySelectClosingTime()。也许在init()里面。因此，它还会在init()函数调用或页面加载时创建第二个下拉列表。而且我不必在控制器中创建$scope.uiAvailableTimes。

工作示例： PLUNKER

Answer 1

尝试将scope参数添加到指令中，您可以使用：

.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：

<closing-time-sync ng-model="paramFromController"></closing-time-sync>

希望能解决您的问题。

AngularJS调用指令函数来自控制器对数据的加载

1 个答案: