如何使用按钮执行ng include

How to perform ng-include with button?

本文关键字:ng include 执行 按钮 何使用      更新时间:2023-09-26

单击按钮时,我在尝试执行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。