Javascript 角度ng包括过载方法不能正常工作我用的是基础和角度，大部分我都用过，但是碰到了一个小问题。我使用基础选项卡，当我的角控制器将它连接起来，第一个选项卡似乎是复制的，当我点击任何其他选项卡，它总是堆叠在第一个选项卡的顶部。_Javascript_Css_Html_Angularjs

Javascript 角度ng包括过载方法不能正常工作我用的是基础和角度，大部分我都用过，但是碰到了一个小问题。我使用基础选项卡，当我的角控制器将它连接起来，第一个选项卡似乎是复制的，当我点击任何其他选项卡，它总是堆叠在第一个选项卡的顶部。

javascript css html angularjs

Javascript 角度ng包括过载方法不能正常工作我用的是基础和角度，大部分我都用过，但是碰到了一个小问题。我使用基础选项卡，当我的角控制器将它连接起来，第一个选项卡似乎是复制的，当我点击任何其他选项卡，它总是堆叠在第一个选项卡的顶部。,javascript,css,html,angularjs,Javascript,Css,Html,Angularjs,奇怪的是，当我在inspector中修补任何css样式时，它都会神奇地工作。例如，如果我在任何地方切换任何样式。如果我运行一个在加载ng include时触发的警报，我也可以让它工作。我原以为设置超时就可以了，但那没用。下面请检查我的代码，让我知道你认为可能是什么问题，或者如果我做了一些错误的事情。谢谢，谢谢你的帮助 JS .controller('MyAppCtrl', ['$scope', function ($scope) { $scope.tabs = [ {

奇怪的是，当我在inspector中修补任何css样式时，它都会神奇地工作。例如，如果我在任何地方切换任何样式。如果我运行一个在加载ng include时触发的警报，我也可以让它工作。我原以为设置超时就可以了，但那没用。下面请检查我的代码，让我知道你认为可能是什么问题，或者如果我做了一些错误的事情。谢谢，谢谢你的帮助

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

我不太明白问题出在哪里，但通过查看您的代码，我发现了一些不可能解决的问题：

您的函数

initTabs

不接受任何参数，但是当您调用它时，您正在传递选项卡的

$index

，可能您希望该函数如下所示：

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

如果这没有帮助，请添加一个到jsFiddle或Plunker的链接，并提供一个您的问题示例，以便我们可以重现它并尝试修复它？谢谢

经过一些故障排除后，我能够找出导致选项卡内容显示不正确的原因。当使用基础框架端口使用角度时，只要删除了SASS导入的所有内容，就可以使用CSS而不是SASS。我最初认为这个问题是由NG中的OnLoad引起的，但是在阅读了角基金会的文档后，我意识到SASS选项还没有支持CSS选项。p>


静态内容
{{tab.content}
选项卡集上的ng init
ng repeat
和ng include有自己的作用域。谢谢，但我试图解决的问题是，在导航其他选项卡时，第一个选项卡没有卸载。奇怪的是，当我在Chromes web inspector中修改样式时，它会卸载第一个选项卡，一切看起来都很好。我还注意到，当我调整窗口大小时，它也解决了问题。我认为您需要提供一个plnkr来解决您的问题。谢谢，我更新了它。其实不是问题。我会在JSFIDLE上放一些东西，希望能更好地沟通我的问题。
<!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>