Question

我做了一个系统，在1分钟后让用户闲置，我打开一个带有按钮的模式，用一个按钮提醒用户，里面有一个重定向到登录页面的按钮。

    controllerScope.logout = function () {
                alert("logout");
                $location.path('/');
                AuthService.logout(controllerScope.user).then(function (result) {
                    $state.go('user.signin');
                });
            };

在我看来：

<script type="text/ng-template" id="timedout-dialog.html">
<div class="modal-header">
            <h3>Oh, Snap! You've Timed Out!</h3>
        </div>
        <div class="modal-body">
            <p>
            You were idle too long.  Click the button below to be redirected to the login page and begin again.
            </p>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-danger btn-small" ng-click="doLogout()">Back To Login</button>
        </div>
</script>

为什么当我点击模态上的"back to login"时，它不会转到我在控制器上的功能？我试图弹出一个警报，一个简单的事情，但事件不起作用

Answer 1

您需要进行以下更改，因为您使用controller as语法：

在控制器中，它应该像var controllerScope = this
在HTML控制器声明中，如：ng-controller ="yourcontrollername as controllerScope"
在致电logout期间，它应该像ng-click="controllerScope.logout()"

<强>更新

你的plunker有很多问题，甚至没有角度问题。因此，我使用尽可能少的代码创建了此Fiddle来显示要完成的事情。

一般来说：

使用controller作为别名。，用于注销ng-click="inventoryCtrl.openNewDeviceModal()"和打开模态弹出窗口使用别名controller: 'InventoryController as inventoryCtrl',

Answer 2

错误地调用了您的ng-click方法：请更改ng-click="controllerScope.logout()">而不是ng-click="doLogout()">

更新

我已上传我的代码与您分享https://jsfiddle.net/y0xrgjaf/ 您的模板代码位于控制器div标签之外。您应该在主div中添加所有html代码

<div ng-controller="controllername">
   //all code should be here 
</div>

将以下代码复制并粘贴

<div class="row" ng-controller="InventoryController as inventoryCtrl" >
    <div class="col-md-12">
        <div class="panel mb25">
            <div class="panel-body">
                <table class="table mb0 table-striped datatable" ui-jq="dataTable" ui-options="devicesData">
                    <thead>
                        <tr>
                            <th></th>
                            <th>S/N</th>
                            <th>IP</th>
                            <th>Name</th>
                            <th>Manufacturer</th>
                            <th>Model</th>  
                            <th>Organization</th>   
                            <th style="width:70px;"></th>                       
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
        <div>
            <button class="btn btn-default" ng-click="openNewDeviceModal()">Add Device</button>
        </div>
    </div>


<script type="text/ng-template" id="newDeviceModalContent.html">
    <div class="modal-header">
        <h3 class="modal-title" ng-bind="deviceModalTitle"> Add Device</h3>
    </div>
    <div class="modal-body">
        <form class="form-horizontal bordered-group" role="form" name="addDeviceForm">
            <div class="form-group">
                <label class="col-sm-2 control-label">Name</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" name="name" ng-model="newdevice.data.name" required>
                    <span ng-show="addDeviceForm.name.$invalid">The name is required.</span>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">S/N</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" name="sn" ng-model="newdevice.data.sn" required>
                    <span ng-show="addDeviceForm.sn.$invalid">The S/N is required.</span>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">Model</label>
                <div class="col-sm-10">
                    <select class="form-control" ng-model="newdevice.device_type_id" ng-options="type.id as type.model for type in deviceTypes">  
                        <option value="">None</option>                      
                    </select>                    
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">Organization</label>
                <div class="col-sm-10">
                    <select class="form-control" ng-model="newdevice.organization_id" ng-options="organization.id as organization.data.name for organization in organizations">
                        <option value="">None</option>
                    </select>                    
                </div>
            </div>
        </form>
    </div>
    <div class="modal-footer">
        <button class="btn btn-default btn-sm" ng-click="saveDevice()" ng-disabled="addDeviceForm.name.$invalid || addDeviceForm.sn.$invalid">Save</button>
        <button class="btn btn-default btn-sm" ng-click="cancel()">Cancel</button>
    </div>
</script>

<script type="text/ng-template" id="timedout-dialog.html">
<div class="modal-header">
            <h3>Oh, Snap! You've Timed Out!</h3>
        </div>
        <div class="modal-body">
            <p>
            You were idle too long.  Click the button below to be redirected to the login page and begin again.
            </p>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-danger btn-small" ng-click="inventoryCtrl.logout()">Back To Login</button>
        </div>
</script>
</div>

Answer 3

将doLogout（）函数设置为ng-click。你的意思是你的控制器中的logout（）吗？

点击按钮不要退出

3 个答案:

更新