I am having trouble trying to perform an ng-include when I click a button. Here is my code:
Main.html:
<div class="main">
<div ng-include="(manage.show && 'dsManage.html') || dsSelect.html"></div>
<h1>Data Sources</h1>
<div ng-controller="MainCtrl" >
<div ng-show="reportManage && (reportManage.canManage || reportManage.canManageAll)">
<div class="row searchRow">
<span class="col-sm-6" style="padding-left: 0px;">
<span class="input-group">
<input type="text" class="form-control searchInput" placeholder="Search" ng-model="search">
<span class="input-group-addon"><img ng-if="search" src="../images/Search_clear.png" ng-click="clearSearch()"/></span>
</span>
</span>
<div class="col-sm-2 col-sm-offset-4 text-right">
<a ng-show="tileLayout" class="btn-list-view" ng-click="tileLayout=false">List View</a>
<a ng-show="!tileLayout" class="btn-tile-view" ng-click="tileLayout=true">Tile View</a>
</div>
</div>
<div class="text-left">
<button ng-click="showDatasources()">All/Default</button>
<button ng-click="showManagePage()">Manage</button>
<!--<a href="{{dsSelectAllDefault}}" id="btn-default-all"></a>-->
</div>
</div>
</div>
</div>
Main.js:
$scope.showManagePage = function() {
console.log("True");
$scope.manage.show = true;
}
Basically what I want is that when I click the Manage
button, showManagePage()
will trigger and cause the ng-include
at the very top of the code to trigger and show dsManage.html
. This will replace the existing view, dsSelect.html
, with dsManage.html
. However, whenever I press this button, nothing occurs. The thing is these pages are in my root directory and when i add the ./
prefix to my files, my page seems to crash. Can anyone help me out? Thanks!
EDIT: Updated Main.html file:
<div class="main">
<div ng-controller="MainCtrl" >
<div ng-show="manage.show" ng-include="'dsManage.html'"></div>
<div ng-show="!manage.show">
<h1>Data Sources</h1>
<div ng-show="reportManage && (reportManage.canManage || reportManage.canManageAll)">
<div class="row searchRow">
<span class="col-sm-6" style="padding-left: 0px;">
<span class="input-group">
<input type="text" class="form-control searchInput" placeholder="Search" ng-model="search">
<span class="input-group-addon"><img ng-if="search" src="../images/Search_clear.png" ng-click="clearSearch()"/></span>
</span>
</span>
<div class="col-sm-2 col-sm-offset-4 text-right">
<a ng-show="tileLayout" class="btn-list-view" ng-click="tileLayout=false">List View</a>
<a ng-show="!tileLayout" class="btn-tile-view" ng-click="tileLayout=true">Tile View</a>
</div>
</div>
<div class="text-left">
<button ng-click="showDatasources()">All/Default</button>
<button ng-click="showManagePage()">Manage</button>
<!--<a href="{{dsSelectAllDefault}}" id="btn-default-all"></a>-->
</div>
</div>
</div>
</div>
</div>
</div>
I am now getting an issue saying WARNING: Tried to load angular more than once.
and I notice I only get this error when I perform the ng-include
. Any ideas on how to fix this?
I believe your manage.show is outside the scope of controller MainCtrl. Try moving the DIV with ng-include inside the controller DIV. or move the controller declaration to the div with class main.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.