Question

我使用基础和角度大部分我已经工作但遇到了一个小问题。我正在使用基础选项卡，当我的角度控制器连接它时，第一个选项卡似乎重复，当我点击任何其他选项卡时，它总是叠加在第一个选项卡的顶部。

奇怪的是，当我在检查员中修改任何CSS样式时，它只是神奇地起作用。例如，如果我在任何地方切换任何样式。如果我运行一个触发ng-include的警报，我也能够使它工作。我认为setTimeout会做的伎俩但是没有用。下面请查看我的代码，让我知道您认为可能是什么问题，或者我是否做错了什么。谢谢，任何帮助表示赞赏。

JS

.controller('MyAppCtrl', ['$scope', function ($scope) {
    $scope.tabs =  [
        { tabID:'0', title:'title1', content:'templates/tab-one.html'},
        { tabID:'1', title:'title2', content:'templates/tab-two.html'},
        { tabID:'2', title:'title3', content:'templates/tab-three.html'}
    ];
    $scope.currentIndex = 0;
    $scope.initTabs = function () {
        alert($scope.currentIndex);
    };
    $scope.isCurrentSlideIndex = function(index) {
        return $scope.currentIndex === index;
    }
}]);

HTML

<tabset>
    <tab ng-repeat="tab in tabs" heading="{{tab.title}}" content="  
    {{tab.content}}" active="tab.active">
        <ng-include onload="initTabs($index)" src="tab.content"></ng-include>
    </tab>
</tabset>

Answer 1

经过一些故障排除后，我能够找出导致问题的原因是标签内容无法正常显示。当使用Angular和Foundation框架端口时，只要我删除sass导入正确显示的所有东西，你就只能使用css而不是sass。我最初认为这个问题是由ng-include中的onload引起的，但在阅读Angular Foundation上的文档后，我意识到sass选项还不支持css选项。

Plunker example

<!doctype html>
<html ng-app="plunker">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.js"></script>
<script src="//pineconellc.github.io/angular-foundation/mm-foundation-tpls-0.3.1.js"></script>
<script src="example.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.2.0/css/foundation.css" rel="stylesheet">
</head>
<body>

<div ng-controller="TabsDemoCtrl">
<tabset>
<tab heading="Static title">Static content</tab>
<tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active">
  {{tab.content}}
</tab>
</tabset>
</div>

Answer 2

我不太明白问题是什么，但看着你的代码我发现了一些不可能的东西：

您的函数initTabs不接受任何参数，但是当您调用它时，您正在传递$index选项卡，也许您希望该函数看起来像这样：

$scope.initTabs = function(index) {...}

如果这没有帮助，你能否提供一个链接到jsFiddle或Plunker的一个问题的例子，以便我们可以重现它并尝试修复它？谢谢！

Angular ng-include onload方法无法正常工作

2 个答案: