Угловой ng-include метод onload не работает должным образом

Я использую основание и угловатый по большей части, у меня он работает, но столкнулся с небольшой проблемой. Я использую закладки для основы, и когда мой угловой контроллер подключается к ней, первая вкладка кажется дублированной, и когда я нажимаю на любую другую вкладку, она всегда складывается поверх первой вкладки.Угловой ng-include метод onload не работает должным образом

Странно, когда я возиться с любым стилем css в инспекторе, он просто волшебным образом работает. Например, если я переключаю любой стиль в любом месте. Я также могу заставить его работать, если я запускаю предупреждение, которое запускается при загрузке ng-include. Я думал, что 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

'нг-init' на' tabset'? 'ng-repeat' и' ng-incue' имеет свой собственный объем. – allenhwkim

Спасибо, но проблема, которую я пытаюсь решить, - это первая вкладка, которая не разгружается при навигации по другим вкладкам. Странно, когда я возился со стилями в веб-инспекторе Chromes, он выгружает первую вкладку, и все выглядит нормально. Я также заметил, когда я изменяю размер окна, чтобы решить эту проблему. –

Я думаю, вам нужно предоставить plnkr, чтобы решить вашу проблему. – allenhwkim

После некоторой проблемы со стрельбой я смог выяснить, что вызывает проблему с отображением содержимого вкладки. При использовании Angular с базовым портом Foundation вы можете использовать только css, а не sass, как только я удаляю sass импортирует все отображаемое правильно. Первоначально я думал, что эта проблема вызвана загрузкой в ng-include, но после прочтения документации по 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

Спасибо, я обновил это. Не проблема. Надеюсь, что я буду надеяться, что лучше расскажу о моих проблемах. –

Угловой ng-include метод onload не работает должным образом

ответ

Смежные вопросы