带有Angular JS的材质CSS选项卡不起作用

时间:2018-11-20 09:10:53

标签: jquery angularjs materialize

我收到错误 TypeError:当我使用指令初始化Tabs(CSS版本1.0)时,无法读取未定义的'classList'属性'。生成动态标签时,我得到了这个。不是静态的。

代码

 var myapp = angular.module('myapp', []);
    myapp.directive("mTabs", ["$timeout", function ($timeout) {
        return function (scope, element, attrs) {
            debugger;
            element.tabs();
            $timeout(function () {
                debugger;
                element.tabs();
            });
        };
    }]).
        controller('myController', function ($scope) {
            $scope.tabs = [{ link: "test1", content: "Test 1 Tab" }, { link: "test2", content: "Test 2 Tab" }, { link: "test3" ,content: "Test 3 Tab"}];
        });


<div class="row" ng-controller="myController">
    <div   class="col s12">
        <ul class="tabs" m-tabs id="dashboardTabs">
            <li  ng-repeat="x in tabs" class="tab col s3"><a href="#{{x.link}}"></a></li>
        </ul>
    </div>

    <div ng-repeat="x in tabs" id="{{x.link}}">{{x.content}}</div>

</div>

使用上面的代码,我得到了错误。

但是使用下面的代码没有问题

<div   class="col s12">
        <ul class="tabs" m-tabs id="dashboardTabs">
            <li class="tab col s3"><a href="#test1">Test 1</a></li>
            <li class="tab col s3"><a href="#test2">Test 2</a></li>
            <li class="tab col s3"><a href="#test3">Test 3</a></li>
        </ul>
    </div>
    <div id="test1" class="col s12">Test 1</div>
    <div id="test2" class="col s12">Test 2</div>
    <div id="test3" class="col s12">Test 3</div>

请帮助。

0 个答案:

没有答案