AngularJS Jquery 指令

Question

我在我的页面上使用 Jquery Selectric 在我的 angularJS 应用程序中呈现一个 select 框，所以我决定创建一个指令来呈现元素，下面是指令以及我如何使用它。

指令：

angular.module('shoeRevamp.directives')
  .directive('selectric', function () {
    return {
      restrict: 'A',
      scope: {countries: '='},
      controller: function ($scope, $element, $attrs) {
        console.log($scope.countries);
      },
      link: function (scope, el, attrs) {
        if( $("select").length) {
          $(el).selectric();
        }
      }
    };
  });

我如何使用它(Jade/Pug):

select(selectric ng-model='country' countries='countries' ng-options='country.name for country in countries track by country.symbol')

问题

当我加载页面并尝试打开 select 框时，它抱怨以下错误，但没有显示任何国家/地区：

错误信息

jquery.selectric.min.js:1 Uncaught TypeError: Cannot read property 'offsetTop' of undefined

另一个问题

当我添加 priority: -1000, 时，它会显示国家/地区，但会失去其 Selectric 样式和行为。

我需要帮助。

Answer 1

所以从技术上讲，你遇到的问题是，当 selectric 在 DOM 上初始化时，你的 ng-options 还没有填充 DOM，所以 selectric 有空列表。

要解决此问题，您需要使用 selectric ajax 格式加载数据以构建选项，然后将它们注入 selectric 下拉列表。

Javascript

.directive('selectric', function ($timeout) {
    return {
      restrict: 'A',
      scope: {countries: '='},
      link: function (scope, el, attrs) {
          var myList = "";
          //Loop through the list of countries and build the options
          for(i = 0; i < scope.countries.length; i++) {
            myList = myList + "<option value='" + scope.countries[i].symbol + "'>" + scope.countries[i].name + "</option>";
          }
          //Start selectric and append option list
          el.append(myList).selectric();
      }
    };
  })
;

HTML

<select ng-model='country' selectric countries='countries'></select>

值得一提的两件事：

你不能在 selectric 中使用 ng-options，我曾尝试过一个 hacky 解决方案来设置使用 selectric 的超时，但这会产生它自己的问题
因为你不能使用 ng-options 这也意味着你不能使用对象作为选项值，这会给你的开发带来一些限制。

AngularJS Jquery 指令

AngularJS Jquery Directive

javascript

jquery

angularjs

jquery-selectric

Javascript

HTML