javascript - 出现错误，无法读取未定义的哈希值

Question

我正在尝试在我的主页上添加 MaterializeCSS 选项卡。要初始化它，我必须使用

$('ul.tabs').tabs();

在文档准备好该行后，出现错误

TypeError: Cannot read property 'hash' of undefined

下面是我的代码:

'use strict'

angular
    .module('app')
    .controller('HomeController', HomeController);

HomeController.$inject = ['$rootScope','$scope'];

function HomeController($rootScope,$scope) { 
    var vm = this;
    vm.title = "Supreme Kinetic";
    $rootScope.home_default = true;
    vm.tab_menu =   [
                        {name:'Chair',disabled:'',active:'',id:'chair', icon:'event_seat'},
                        {name:'Electric Kettle',disabled:'',active:'active',id:'electric_kettle',icon:'opacity'},
                        {name:'Cutleries',disabled:'',active:'',id:'cutleries', icon:'card_travel'},
                        {name:'Reward',disabled:'disabled',active:'',id:'reward', icon:'redeem'}
                    ];

    angular.element(document).ready(function () {
        $('ul.tabs').tabs();
    });
}

home.html

<ul class="tabs">
    <li class="tab col s3 {{tab.disabled}}" ng-repeat="tab in vm.tab_menu"><a class="{{tab.active}}" href="#{{tab.id}}"><i class="material-icons tab_icon">{{tab.icon}}</i><div class="tab_text">{{tab.name}}</div></a></li>
</ul>
<div ng-repeat="tab in vm.tab_menu" id="{{tab.id}}">
    <div class="row">
        <div class="card col l3">
            {{tab.name}}
        </div>
    </div>
</div>

我已经通过使用 angular.element(document).ready 以及 $scope.$on('$viewContentLoaded', function() 加载方式搜索了许多解决方案 但两者都给出了相同的错误。我做错了什么？

Answer 1

我找到了一个对我有用的修复程序。我将以下内容添加到我的 Controller 中:

$scope.$on('$includeContentLoaded', function() {
  // run any jQuery
  angular.element('ul.tabs').tabs();
});