gpt4 book ai didi

javascript - Angular 应用找不到 ng-template tpl.html 文件

转载 作者:行者123 更新时间:2023-11-30 10:15:26 24 4
gpt4 key购买 nike

我有一个简单的 Angular TabCtrl 加载不同的模板文件。我将模板文件本身包括在内:

<script type="text/ng-template" id="summary.tpl.html">
// Actual template elements
</script>

ng-app 内并且与 TabCtrl 在同一页面上。但是,模板不会在页面加载时或单击选项卡时加载。我几乎完全按照这个 JSFiddle ( http://jsfiddle.net/eRGT8/162/ )...我做错了什么?

如果我不发布更多代码你帮不了我,我会这样做。

编辑:更多代码

<!doctype html>
<html lang="en" ng-app="myApp">
<head>
</head>
<body>
<div id="wrapper">
<div id="sidebar-wrapper">
<div class="logo">
</div>
<ul class="sidebar-nav" ng-controller="TabsCtrl">
<li ng-repeat="tab in tabs"
ng-class="{active_tab:isActiveTab(tab.url)}"
ng-click="onClickTab(tab)">
<a href="#">
<div class="tab-icon">
<i ng-class="tab.icon"></i>
</div>
<div class="tab-label">{{tab.label}}</div>
</a>
</li>
</ul>
</div>
<div id="page-content-wrapper">
<div class="page-content">
<div class="dashboard" ng-include="activeTab"></div>
<script type="text/ng-template" id="summary.tpl.html">
HI
</script>
<script type="text/ng-template" id="downloads.tpl.html">

</script>
<script type="text/ng-template" id="ads.tpl.html">

</script>
<script type="text/ng-template" id="landing.tpl.html">

</script>
<script type="text/ng-template" id="retargeted.tpl.html">

</script>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-route.js"></script>
<script src="lib/ui-bootstrap.js"></script>
<script src="js/routes.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>

</body>
</html>

编辑: JS 文件

myApp.controller('TabsCtrl', ['$scope', function ($scope) {
$scope.tabs = [{
label: 'one',
icon: 'one',
url: 'summary.tpl.html'
}, {
label: 'two',
icon: 'two',
url: 'downloads.tpl.html'
}, {
label: 'three',
icon: 'three',
url: 'ads.tpl.html'
}, {
label: 'four',
icon: 'four',
url: 'landing.tpl.html'
}, {
label: 'five',
icon: 'five',
url: 'retargeted.tpl.html'
}];

$scope.activeTab = 'summary.tpl.html';

$scope.onClickTab = function(tab) {
$scope.activeTab = tab.url;
}

$scope.isActiveTab = function(tabUrl) {
return tabUrl == $scope.activeTab;
}
}]);

最佳答案

你的 ng-include="activeTab"它在 TabsCtrl 的范围之外定义在 ng-controller="TabsCtrl" .

尝试将其添加到 div id="wrapper" .

<div id="wrapper" ng-controller="TabsCtrl">

元素

<div class="dashboard" ng-include="activeTab">

需要在 TabsCtrl 内部,然后它们才能相互通信。 https://docs.angularjs.org/guide/scope

另一种(但不是很推荐的方法)是将变量添加到 $rootScope 并将其传递给 Controller ​​。

例如:

myApp
.controller('TabsCtrl',
['$scope', '$rootScope', function ($scope, $rootScope) {

       ...

$rootScope.activeTab = 'summary.tpl.html';

在这种情况下,activeTab将在整个 ng-app="myApp" 中提供范围。

关于javascript - Angular 应用找不到 ng-template tpl.html 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24067208/

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