Angular自定义指令未显示选择输入

时间:2016-09-22 10:18:18

标签: javascript angularjs

由于某种原因,未显示选择输入字段的标签。我为它制作了一个自定义指令,如下所示:

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;
          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;
      });
    }
  };
});

在我的模板中,我插入了这样的指令:

          <fancy-select
            title="Klassetrinn"
            model="selected.year"
            ng-model="user.year"
            options="years"
            enable="true"
            on-change="onChangeYears()"
            active="yearsActive"
            name="playerYear"
            form-name="registerForm"
          >
          </fancy-select>

然后在我的个人资料中,我得到了选定年份的价值:

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

$scope.selected = {
    year: []
  };

user.player.year = $scope.selected.year;

但由于某种原因,标签“Klassetrinn”没有显示在模板中,不知道为什么会这样?

0 个答案:

没有答案