ng 重复后初始化 AngularJS 插件

AngularJS plugin initialization after ng repeat

本文关键字：AngularJS 插件 初始化 ng      更新时间：2023-09-26

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

<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 调用获取的。

>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/

建议您尝试使用 $timeout() 看看移动到下一个摘要周期是否有帮助

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

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

如果这不这样做，则创建一个 plunker 演示，其中包含复制此内容所需的资源

相关文章：