Question

我需要从我在多个地方使用的指令中传递一个选定的值。这是一个选择输入字段，我需要从中获取选定的值。

这是指令的样子：

angular.module('quiz.directives')
.directive('fancySelect', function($rootScope, $timeout) {
  return {
    restrict: 'E',
    templateUrl: 'templates/directives/fancySelect.html',
    scope: {
      title: '@',
      model: '=',
      options: '=',
      multiple: '=',
      enable: '=',
      onChange: '&',
      class: '@'
    },
    link: function(scope) {
      scope.showOptions = false;
      scope.displayValues = [];

      scope.$watch('enable', function(enable) {
        if (!enable && scope.showOptions) {
          scope.toggleShowOptions(false);
        }
      });

      scope.toggleShowOptions = function(show) {
        if (!scope.enable) {
          return;
        }

        if (show === undefined) {
          show = !scope.showOptions;
        }

        if (show) {
          $rootScope.$broadcast('fancySelect:hideAll');
        }

        $timeout(function() {
          scope.showOptions = show;
        });
      };

      scope.toggleValue = function(value) {
        if (!value) {
          return;
        }

        if (!scope.multiple) {
          scope.model = value;
          console.log(scope.model);
          return;
        }

        var index = scope.model.indexOf(value);
        if (index >= 0) {
          scope.model.splice(index, 1);
        }
        else {
          scope.model.push(value);
        }

        if (scope.onChange) {
          scope.onChange();
        }
      };

      scope.getDisplayValues = function() {
        if (!scope.options || !scope.model) {
          return [];
        }

        if (!scope.multiple && scope.model) {
          return scope.options.filter(function(opt) {
            return opt.id == scope.model;
          });
        }

        return scope.options.filter(function(opt) {
          return scope.model.indexOf(opt.id) >= 0;
        });
      };

      $rootScope.$on('fancySelect:hideAll', function() {
        scope.showOptions = false;
      });
    }
  };
});

当我console.log(scope.model);时，我得到了所选的值，但我不知道如何获取它并在我的控制器中使用它？

这是控制器：

angular.module('quiz.controllers')
.controller('ProfileController', function(
  $scope,
  $state,
  $stateParams,
  UserService,
  $auth,
  MessageService,
  $ionicLoading,
  AppSettings,
  $timeout,
  AvatarService,
  PushService,
  $http
) {
  $scope.user = UserService.get();
  $scope.profilePromise = {};

  if ($scope.user.player.avatar == ""){
    $scope.user.player.avatar = AvatarService.getRandom();
  }

  $http.get(AppSettings.apiUrl + '/years')
    .then(function(result) {
      $scope.years = result.data;
    });

  $scope.updateUser = function(form) {
    if (!form.$valid) {
      var message = "Ugyldig data i skjema. Sjekk felter markert med rødt.";
      MessageService.alertMessage(message);
      return;
    }

    saveUser($scope.user);
  };

  $scope.getNextAvatar = function() {
    $scope.user.player.avatar = AvatarService.getNext($scope.user.player.avatar);
  };

  $scope.getPreviousAvatar = function() {
    $scope.user.player.avatar = AvatarService.getPrevious($scope.user.player.avatar);
  };

  var saveUser = function(user) {
    $scope.profilePromise = UserService.save(user);

    $scope.profilePromise.then(function(result) {
      $scope.user = result.data.user;

      PushService.init();
      PushService.getDeviceId().then(function(id) {
        UserService.addDevice(id);
      });

      if ($stateParams.register) {
        $state.go('main.front');
      }
    }, function(error) {
      var message = "Kunne ikke lagre bruker. Melding fra server: " + error.data.message;
      MessageService.alertMessage(message);
    });
  };
});

Answer 1

你在范围内已经有onChange个绑定，为什么不使用那个呢？

在你的指令中：

if (scope.onChange) {
    scope.onChange({ $value: scope.model });
}

然后将控制器函数传递给您的指令：

<fancy-select on-change="onChange($value)"></fancy-select>

在您的控制器中：

$scope.onChange = function(val) {
    // do something with the value
}

Angular - 从控制器

1 个答案: