Question

所以我正在使用MaterialiseCSS，并拥有这段代码：

<select>
<option value="" disabled selected>Jump To Season</option>
<option option-item  ng-repeat="item in series.seasons" value="{{item.id}}">
{{item.name}}
</option>
</select>

我正在使用这个指令：

.directive("optionItem", [function () {
return {
    restrict: 'A',
    link: function (scope, element) {
        if (scope.$last) {
            $('select').material_select();
        }
    }
};
}]);

现在元素会根据需要重复多次，但不是显示$ scope.item.name值，而是将{{item.name}}显示为纯文本，而不是表达式值。我如何克服这一挫折？我尝试使用Material Angular md-select，但我也遇到了问题，每次点击选择我都无法点击网页中的任何内容而没有任何反应。

重要说明： series.seasons数组是通过ajax调用获取的。

Answer 1

在option-item

上设置select指令

  <select option-item>
       <option value="" disabled selected>Jump To Season</option>
       <option ng-repeat="item in users" value="{{item.id}}">
           {{item.name}}
        </option>
  </select>

并更改指令

.directive("optionItem", ['$timeout', function ($timeout) {
    return {
        restrict: 'A',
        link: function (scope, element) {
            $timeout(function() { // wait ng-repeat
                $('select').material_select();
            })
        }
    };
}]);

http://jsfiddle.net/vorant/q9bkrzfo/5/

Answer 2

建议您尝试使用$timeout()查看是否有必要转到下一个摘要周期

.directive("optionItem", ['$timeout',function ($timeout) {
return {
    restrict: 'A',
    link: function (scope, element) {
        if (scope.$last) {
            $timeout(function(){
               element.parent().material_select();
            });
        }
    }
};
}]);

但是请注意，您可能还需要ngModel控制器，并在插件事件中自行管理模型更改

如果这样做没有创建一个带有所需资源的plunker演示来复制这个

ng重复后的AngularJS插件初始化

2 个答案: