Ang-ng包含onload方法不能正常工作

我使用基础和角度的大部分我有它的工作，但遇到了一个小问题。我正在使用基础选项卡，并且当角度控制器将其连接起来时，第一个选项卡似乎重复，并且当我单击其他任何选项卡时，它总是会堆叠在第一个选项卡顶部。Ang-ng包含onload方法不能正常工作

奇怪的是，当我用检查器中的任何css风格修补它只是神奇的作品。例如，如果我在任何地方切换任何样式。如果我运行一个警告，它会触发ng-include的onload，我也可以使它工作。我认为setTimeout会做的伎俩，但没有奏效。下面请查看我的代码，让我知道你认为可能是问题，或者如果我做错了什么。感谢和任何帮助表示赞赏。

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

来源

2014-09-03 Galactic Ranger

''上吴tabset'，init'？ 'ng-repeat'和'ng-inclue'有它自己的范围。 – allenhwkim 2014-09-03 21:35:55

谢谢，但我试图解决的问题是，当我导航其他选项卡时，第一个选项卡不会卸载。奇怪的是，当我在Chromes web inspector中修改样式时，它卸载了第一个选项卡，事情看起来很好。我还注意到，当我调整窗口大小时，它也解决了问题。 – 2014-09-04 18:31:12

我认为你需要提供一个plnkr来解决你的问题。 – allenhwkim 2014-09-04 21:23:38

经过一些故障排除后，我能够找出导致问题的标签内容显示不正常的原因。将Angular与Foundation框架端口一起使用时，只要使用css而不是sass，只要我删除了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>

来源

2014-09-05 00:09:15

我不太明白的问题是什么，但看着你的代码中，我发现的东西，它不能be wright：

您的功能initTabs不带任何参数，但是当你把它要传递的标签的$index，也许你想要一个功能，看起来像这样：

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

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

来源

2014-09-03 21:35:26 Josep

谢谢，我更新了。不是真的问题。我会在jsfiddle上放一些东西，希望能更好地交流我的问题。 – 2014-09-04 18:28:20

Ang-ng包含onload方法不能正常工作

回答

相关问题