如何使用按钮执行ng include
How to perform ng-include with button?
单击按钮时,我在尝试执行ng include时遇到问题。这是我的代码:
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;
}
基本上,我想要的是,当我单击Manage
按钮时,showManagePage()
将触发并导致代码顶部的ng-include
触发并显示dsManage.html
。这将用dsManage.html
替换现有视图dsSelect.html
。然而,每当我按下这个按钮时,什么都不会发生。问题是这些页面在我的根目录中,当我在文件中添加./
前缀时,我的页面似乎会崩溃。有人能帮我吗?谢谢
编辑:更新的Main.html文件:
<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>
我现在遇到一个问题,说WARNING: Tried to load angular more than once.
,我注意到只有在执行ng-include
时才会出现此错误。关于如何解决这个问题有什么想法吗?
我相信您的manage.show不在控制器MainCtrl的范围内。尝试将带有ng-include的DIV移动到控制器DIV.或将控制器声明移动到带有class main的DIV。
相关文章:
- AngularJS ng include dons'不起作用
- ng include导致角度问题
- AngularJS ng include won'不知什么原因不起作用
- 如何将动态文件名传递给ng-include
- 有没有办法在AngularJS中强制重新加载递归ng-include
- 使用ng-include渲染Angular模板时出现问题
- 每个ng-include模板都有单独的变量
- AngularJS:如何使用ng-include将javascript文件加载到部分中
- 阻止“ng include”创建孤立的作用域.AngularJS
- 如何扩展 Angularjs ng-include 指令
- 在 ng-include 中使用变量作为表达式
- ng-class 在 angularJs 中由 ng-include 包含的文件内不起作用
- 模块化与性能与性能与角度应用程序中的ng-include
- 未捕获的错误: [$injector:modulerr] - 角度 ng-include
- 使用ng-include调用控制器时AngularJS路由解析
- angular js中嵌套ng include内的表单
- 在AngularJS中动态切换ng include和ng控制器
- 使用ng-include重用以前实例化的模板
- 页面不可滚动,其中ng include=“”;函数()"-该代码已不再使用
- 如何在双大括号表示法{{}}中使用ng-include和html文件