Question

编辑：我已经解决了。项目的根目录中有一个gruntfile.js。从来没有听说过它，用Google搜索，运行它，现在它可以工作了。笨。无论如何，谢谢你的努力！

我只想在此前言;这不是我的项目，我只是想加入它，原来的制造商不可用。我只在AngularJS工作了三个星期，在我去过的课程中，结构与AngularJS推荐的结构完全一样，而不是像这个项目。

我正在尝试为带有订阅信息的模态弹出窗口添加两个按钮。它包含一般子信息和历史表。按钮用于在子信息和历史之间切换。所以我写了一个功能只是为了尝试一下。它被称为＆＃34; toggleMobileDetailsInfoHistoryModule＆＃34;。这是html，它只有这样的五个脚本，没有别的，这就是我正在使用的那个：

<script type="text/ng-template" id="MobileSubscriptionDetailModal">
<div class="modal-header">
    <button type="button" class="close" ng-click="cancel()">&times;</button>
    <h4>{{"mobileSubscriptionResource.title"|translate}}</h4><br />
    <button ng-click="toggleMobileDetailsInfoHistoryModule()">{{"mobileSubscriptionResource.history"|translate}}</button>
    <button ng-click="toggleMobileDetailsInfoHistoryModule()">{{"mobileSubscriptionResource.info"|translate}}</button>
</div>
<div ng-if="showInfoModule" class="modal-body">
    <form role="form" name="form" novalidate>

    </form>
</div>
<div ng-if="showHistoryModule" ng-include=" 'pages/history.html' "></div>
<div class="modal-footer">
    <button class="btn btn-primary pull-left" ng-click="edit(mobileSubscription)" ng-show="mobileSubscription.IsOperation">{{'commonResource.edit'|translate}}</button>
    <button class="btn btn-danger pull-left" ng-click="delete(mobileSubscription)" ng-show="mobileSubscription.IsOperation">{{'commonResource.remove'|translate}}</button>
    <button class="btn btn-default" ng-click="cancel()" data-translate="commonResource.cancel"></button>
</div>

所以，我想在包含子信息的表单和包含来自＆＃39; pages / history.html＆＃39;

的表格的div之间切换

这是来自subController的相关信息的摘录：

app.controller("mobileSubscriptionController", ["$scope", "mobileSubscriptionService", "$rootScope", "$modal", "tools", "statusService", "constantService",
"statusFilterService", "columnFilterService",
function ($scope, mobileSubscriptionService, $rootScope, $modal, tools, statusService, constantService, statusFilterService, columnFilterService) {


    $scope.detail = function (mobileSubscription) {
        var detail = $modal.open({
            templateUrl: 'MobileSubscriptionDetailModal',
            controller: mobileSubscriptionDetailCtrl,
            backdrop: 'static',
            resolve: { mobileSubscription: function () { return mobileSubscription; } }
        });

        detail.result.then(function () {
            initMobileSubscription();
        }, function (error) {
            tools.error(error);
            });
    };

}]);

并在同一档案中进一步向下：

var mobileSubscriptionDetailCtrl = ["$scope", "$rootScope", "$modal", "$modalInstance", "mobileSubscription", "historyService", "tools",
function ($scope, $rootScope, $modal, $modalInstance, mobileSubscription, historyService, tools) {

    $scope.toggleMobileDetailsInfoHistoryModule = function () {
        alert("inside!");
        if ($scope.showInfoModule) {
            $scope.showHistoryModule = false;
        } else {
            $scope.showHistoryModule = true;
    };

    $scope.cancel = function () {
        $modalInstance.close();
    };
}];

现在，我已经尝试了ng-if，ng-show。布尔人工作。 ng-click =＆＃34; showHistoryModule =！showHistoryModule＆＃34;有用。但我需要一个功能，因此它可能更复杂。我尝试过使用＆＃34; $ modalInstance.close（）;＆＃34;从我的函数内部的函数（dosent work / close the modal）。我已经尝试在app.controller上面使用app.factory并将功能放在那里但它没有工作，警报/控制台日志不显示..不知何故，我似乎无法添加功能到这个页面/控制器。

这就是我正在使用的develop.html，它在头部包含了一百万个脚本参考，并在体内：

body ng-app="app" style="background-color: #eee">
<div class="mask" ng-show="pageLoading">
    <img class="spin" src="img/loading.gif" />
</div>
<div id="wrap" ng-style="loginBackground" ng-if="!redirecting">
    <div ng-controller="alertController">
        <alert class="global-message" ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)" style="z-index: 5000;position:fixed">
            <span ng-bind-html="alert.msg"></span>
        </alert>
    </div>
    <div id="header" ng-show="isShowHeader">
        <section ng-class="" ng-show="isShowMenu" data-ng-include=" 'header.html' "></section>
    </div>
    <div id="banner" class="row" style="margin-top:-18px;">
        <div class=" col-sm-2 col-md-2 col-sm-offset-1 ">
        </div>
        <div class="col-md-8 white">
            <div ng-show="isShowHeader">
                <span class="page-title">{{pageTitle}}</span>
                <img class="pull-right img-responsive" ng-if="loginUser.clientLogo != ''" style="height: 84px;margin-right: 50px;margin-top: 20px;" />
            </div>
        </div>
    </div>
    <div class="row">
        <div ng-include="'sidebar.html'"></div>
        <div id="main" class="col-sm-8 container" ng-class="{true:'white',false:'login-background'}[isShowHeader]">
            <div ng-view class="main-content"></div>
        </div>
    </div>
</div>
<footer id="footer" ng-show="isShowHeader" ng-if="!redirecting"></footer>

它在ng-view class =＆＃34; main-content＆＃34;

中加载底部附近的视图

这是mobileSubscriptionview，其中调用detail（）（在tbody中）。

<div class="row">

<div class="col-sm-12 controll table-filter">
    <div class="form-inline" style="margin-bottom: 10px;">
        <div class="form-group filter-margin-right">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="{{'commonResource.search'|translate}}" ng-keypress="searchMobileSubscription($event)" ng-model="keyword">
                <i ng-show="loadingLocations" class="glyphicon glyphicon-refresh"></i>
                <span class="input-group-btn">
                    <button class="btn search " ng-click="search()">
                        <i class="glyphicon glyphicon-search search-icon"></i>
                    </button>
                </span>
            </div>
        </div>

        <div class="display-inline filter-margin-right" ng-dropdown-multiselect="" options="properties" selected-model="selectedProperties" checkboxes="true"></div>

        <div class="column-filter-position">
            <span class="btn btn-primary" ng-click="columnFilter.dropdown = !columnFilter.dropdown">
                <i class="glyphicon glyphicon-th-list"></i>
            </span>
            <div class="dropdown-menu collapse column-filter-dropdown" ng-class="{in: columnFilter.dropdown}" ng-blur="columnFilter.dropdown = false">
                <div class="checkbox form-group status-filter-padding-left uppercase-text">
                    <label>
                        <input type="checkbox" ng-model="columnFilter.SelectAll" ng-click="selectAllColumnFilter(columnFilter)"> {{'commonResource.selectAll'|translate}}
                    </label>
                </div>
                <div class="divider"></div>
                <div ng-repeat="column in mobileSubscriptionColumns" class="column-filter checkbox form-group column-filter-padding-left">
                    <label>
                        <input type="checkbox" ng-model="column.isShowColumn" ng-click="setColumnSelectAll(columnFilter)"> {{column.otherName|translate}}
                    </label>
                </div>
                <div class="divider"></div>
                <div class="form-inline">
                    <div class="checkbox status-filter-padding-left">
                        <label>
                            <input type="checkbox" ng-model="columnFilter.rememberMyChoice"> {{'commonResource.rememberMyChoice'|translate}}
                        </label>
                    </div>
                    <span class="btn btn-primary pull-right status-filter-ok" ng-disabled="isShowColumnFilterSpinner" ng-click="addColumnFilter(columnFilter)">
                        {{'commonResource.ok'|translate}}
                        <span spinner is-show="isShowColumnFilterSpinner" style="position: absolute;right: 6%;"></span>
                    </span>
                </div>
            </div>
        </div>
        <a class="btn btn-primary pull-right uppercase-text" ng-click="add()">{{'commonResource.add'|translate}}</a>
    </div>
</div>
<div class="col-sm-12 column-filter-table div-table-min-height">
    <table class="table tablesorter-blue">
        <thead>
            <tr class="uppercase-text tablesorter-headerRow">
                <th ng-repeat="column in mobileSubscriptionColumns" ng-class="{sortable: column.sortable !== false}" ng-show="column.isShowColumn" style="text-align: left;">
                    <i ng-if="column.sortable" class="hand glyphicon {{column.direction|orderClass}}" ng-click="sort.toggle(column)"></i>
                    {{column.otherName|translate}}
                    <i class="glyphicon glyphicon-filter btn-primary hand status-filter-icon" aria-hidden="true" ng-show="column.name=='MobileSubscriptionStatus.Name'" ng-click="mobileSubscriptionStatusFilter.dropdown = !mobileSubscriptionStatusFilter.dropdown"></i>
                    <div class="dropdown" ng-if="column.name=='MobileSubscriptionStatus.Name'">
                        <div class="dropdown-menu collapse status-filter status-filter-drop-down-max-height text-capitalize" ng-class="{in: mobileSubscriptionStatusFilter.dropdown}" ng-blur="mobileSubscriptionStatusFilter.dropdown = false">
                            <div class="checkbox form-group status-filter-padding-left">
                                <label>
                                    <input type="checkbox" ng-model="mobileSubscriptionStatusFilter.SelectAll" ng-click="selectAllStatusFilter(mobileSubscriptionStatusFilter)"> {{'commonResource.selectAll'|translate}}
                                </label>
                            </div>
                            <div class="divider"></div>
                            <div class="status-filter-content">
                                <div ng-repeat="status in mobileSubscriptionStatusFilter.statuses" class="checkbox form-group status-filter-padding-left">
                                    <label>
                                        <input type="checkbox" ng-model="status.Checked" ng-click="setSelectAll(mobileSubscriptionStatusFilter)"> {{status.Name}}
                                    </label>
                                </div>
                            </div>
                            <div class="divider"></div>
                            <div class="form-inline">
                                <div class="checkbox status-filter-padding-left">
                                    <label>
                                        <input type="checkbox" ng-model="mobileSubscriptionStatusFilter.rememberMyChoice"> {{'commonResource.rememberMyChoice'|translate}}
                                    </label>
                                </div>
                                <span class="btn btn-primary pull-right status-filter-ok" ng-disabled="isShowStatusFilterSpinner" ng-click="addStatusFilter(mobileSubscriptionStatusFilter)">
                                    {{'commonResource.ok'|translate}}
                                    <span spinner is-show="isShowStatusFilterSpinner" style="position: absolute;right: 6%;"></span>
                                </span>
                            </div>
                        </div>
                    </div>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr ng-show="listLoading"><td colspan="7" align="center" spinner is-show="listLoading" message="{{commonResource.dataLoading|translate}}"></td></tr>
            <tr ng-repeat="mobileSubscription in mobileSubscriptions">
                <td ng-show="mobileSubscriptionColumns[0].isShowColumn"><a class="hand" ng-click="detail(mobileSubscription)">{{mobileSubscription.MobileNumber}}</a></td>
                <td ng-show="mobileSubscriptionColumns[1].isShowColumn">{{mobileSubscription.SubscriptionType.Name}}</td>
                <td ng-show="mobileSubscriptionColumns[2].isShowColumn">{{mobileSubscription.SubscriptionCategory.Name}}</td>
                <td ng-show="mobileSubscriptionColumns[3].isShowColumn">{{mobileSubscription.ContractEndDate}}</td>
                <td ng-show="mobileSubscriptionColumns[4].isShowColumn">{{mobileSubscription.Owner}}</td>
                <td ng-show="mobileSubscriptionColumns[5].isShowColumn">{{mobileSubscription.DataLimit}}</td>
                <td ng-show="mobileSubscriptionColumns[6].isShowColumn"><a ng-class="{true:'selected-item',false:'unselected-item'}[mobileSubscription.IsActive]"><i class="glyphicon glyphicon-ok"></i></a></td>
                <td ng-show="mobileSubscriptionColumns[7].isShowColumn" title="{{mobileSubscription.Note}}">{{mobileSubscription.Note.length>10?mobileSubscription.Note.substring(0,10)+"...":mobileSubscription.Note}}</td>
                <td ng-show="mobileSubscriptionColumns[8].isShowColumn">{{mobileSubscription.MobileSubscriptionStatus.Name}}</td>
            </tr>
        </tbody>
    </table>
</div>

    <div class="form-inline">
        <pagination style="display: block;" total-items="recordCount" items-per-page="pageSize" ng-model="pageIndex" ng-change="pageChanged()" previous-text="<" next-text=">"></pagination>
        <select class="form-control col-sm-2" style="float: left; margin-left: 10px" ng-change="pagingSizeChange()" ng-model="pageSize">
            <option ng-repeat=" size in pageSizes  track by $index">{{size}}</option>
        </select>
        <a class="btn btn-primary pull-right uppercase-text" ng-click="export()" style="margin-right:5px">{{'commonResource.export'|translate}}</a>
    </div>
    <div ng-include src=" 'pages/share/mobileSubscriptionModel.html' "></div>

    <script type="text/ng-template" id="ExportMobileSubscriptionsModel">
        <div class="modal-header">
            <button type="button" class="close" ng-click="cancel()">&times;</button>
            <h4 class="modal-title">{{'commonResource.export' | translate}}</h4>
        </div>
        <div class="modal-body">
            <p>{{'mobileSubscriptionResource.export' | translate}}</p>
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary " ng-disabled="isShowSpinner" style="width:50px;" ng-click="ok()">
                {{ 'commonResource.yes' | translate }}
                <span spinner is-show="isShowSpinner" style="position: absolute;left: 83%;"></span>
            </button>
            <button type="button" class="btn btn-default" ng-click="cancel()" data-translate="commonResource.no"></button>
        </div>
    </script>
</div>

Answer 1

看起来你没有将mobileSubscriptionDetailCtrl指定为angular。这就是控制器不做任何事情的原因。尝试更改var mobileSubscriptionDetailCtrl = 至 app.controller

无法为我的控制器添加功能（Angular 1）

1 个答案: