gpt4 book ai didi

javascript - AngularJS 函数在 javascript 加载后不应用?

转载 作者:行者123 更新时间:2023-11-28 00:02:30 24 4
gpt4 key购买 nike

我有一个页面,我正在使用 javascript load() 从另一个页面注入(inject)特定的 div 元素:

setTimeout(function(){
function showPattern(patternId, page_url) {
var patternstuff = $(patternId).load(page_url + " .pattern-markup");
return patternstuff;
}
showPattern("#tabsOpen .pattern", "individuals/tabs-open/index.html");
}, 200);

有超时,否则 html 将无法加载和渲染。

我在引入的选项卡上使用 AngularJS:

<div class="tab-container container" ng-controller="PanelController as panel">
<ul class="tabs">
<li class="active" ng-class="{ active: panel.isSelected(1) }"><a ng-click="panel.selectTab(1)">Tab 1</a></li>
<li ng-class="{ active: panel.isSelected(2) }"><a ng-click="panel.selectTab(2)">Tab 2</a></li>
<li ng-class="{ active: panel.isSelected(3) }"><a ng-click="panel.selectTab(3)">Tab 3</a></li>
</ul>
<div class="tab-contents">
<div class="tab-content" ng-show="panel.isSelected(1)">
Tab 1 content
</div>
<!-- Tab 1 Ends Here -->

<div class="tab-content" ng-show="panel.isSelected(2)">
Tab 2 content
</div>
<!-- Tab 2 Ends Here -->

<div class="tab-content" ng-show="panel.isSelected(3)">
Tab 3 content
</div>
<!-- Tab 3 Ends Here -->
</div>
</div>

但是,当页面呈现时,Angular 无法正常工作,并且所有选项卡内容 div 都会显示。 Angular 选项卡 Controller 在这里:

app.controller("PanelController", function() {
this.tab = 1;

this.selectTab = function(setTab) {
this.tab = setTab;
};
this.isSelected = function(checkTab) {
return this.tab === checkTab;
};
});

Angular 选项卡在我从中提取它们的单个页面上运行良好。该页面和我将它们加载到的页面在周围元素上具有相同的 ng-app="manual"属性。这是我从中绘制标签 HTML 的单个 HTML 页面:

<!doctype html>
<html lang="en" ng-app="manual">
<head>
<title>Tabs</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../assets/css/patterns.css">
<script src="../../assets/js/angular.min.js"></script>
<script src="../../assets/js/app.js"></script>
</head>
<body>
<!-- Tabs -->
<div class="pattern-markup">
<div class="tab-container container" ng-controller="PanelController as panel">
<ul class="tabs">
<li ng-class="{ active: panel.isSelected(1) }"><a ng-click="panel.selectTab(1)">Tab 1</a></li>
<li ng-class="{ active: panel.isSelected(2) }"><a ng-click="panel.selectTab(2)">Tab 2</a></li>
<li ng-class="{ active: panel.isSelected(3) }"><a ng-click="panel.selectTab(3)">Tab 3</a></li>
</ul>
<div class="tab-contents">
<div class="tab-content" ng-show="panel.isSelected(1)">
Tab 1 content
</div>
<!-- Tab 1 Ends Here -->

<div class="tab-content" ng-show="panel.isSelected(2)">
Tab 2 content
</div>
<!-- Tab 2 Ends Here -->

<div class="tab-content" ng-show="panel.isSelected(3)">
Tab 3 content
</div>
<!-- Tab 3 Ends Here -->
</div>
</div>
</div>
<!-- End Tabs -->
</body>
</html>

在 JavaScript 加载 HTML 后,我是否需要以某种方式重新初始化 AngularJS,以便 Angular 识别选项卡并使其正常工作?

最佳答案

我想知道 selectTabisSelected 中对 this 值的引用是否会产生问题。在 Controller 中尝试以下代码,

app.controller("PanelController", function() {
var panel = this;
panel.tab = 1;

panel.selectTab = function(setTab) {
panel.tab = setTab;
};
panel.isSelected = function(checkTab) {
return panel.tab === checkTab;
};
});

关于javascript - AngularJS 函数在 javascript 加载后不应用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31657154/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com