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

Angular ng-include onload method not working properly

本文关键字：常工作 工作 include ng onload 方法 Angular      更新时间：2023-09-26

我大部分时间都在使用foundation和angular，但遇到了一个小问题。我使用的是基础选项卡，当我的角度控制器将其连接起来时，第一个选项卡似乎是重复的，当我点击任何其他选项卡时，它总是堆叠在第一个选项卡的顶部。

奇怪的是，当我在检查器中修改任何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>

经过一些故障排除，我终于弄清楚是什么原因导致了选项卡内容显示不正确。当将Angular与Foundation框架端口一起使用时，一旦我删除sass，就只能使用css，而不能使用sass。sass导入所有正确显示的内容。我最初认为这个问题是由ng-include中的onload引起的，但在阅读了Angular Foundation上的文档后，我意识到sass选项还不支持css选项。

Plunker示例

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

我不太明白问题是什么，但通过查看您的代码，我发现了一些不可能是wright的东西：

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

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

如果这没有帮助，你能添加一个到jsFiddle或Plunker的链接，并附上你的问题的例子吗，这样我们就可以复制它并尝试修复它？谢谢

相关文章：