Question

我的一个角度控制器中有一个非常简单的功能

$scope.search = function () {
    alert("Search");  
};

从我的观点来看，我有

<button type="button" data-ng-click="search()"><i class="fa fa-search"></i></button>

单击该按钮时，该功能永远不会执行，但我的控制器中的其余代码将按预期执行。有没有理由说ng-click指令不会触发我的函数？

我有类似的控制器都按预期工作。

更新

按钮位于bootstrap 3模式中，当按钮移出模态时，单击事件有效。出现这种情况的原因是什么？

更新

按钮在控制器的范围内，这是我的控制器和视图以便清晰

(function () {
var module = angular.module("crest");

var brokerGridController = function ($scope, readEndpoint, readBroker) {
    $scope.endpoint = "";
    $scope.isBusy = false;
    $scope.havebroker = false;
    $scope.brokers = [];
    $scope.searchCriteria = "";
    $scope.exception = "";

    var setEndpoint = function (response) {
        $scope.endpoint = response.Endpoint;
    };

    readEndpoint.read("BusinessLogicAPI").then(setEndpoint);

    var onSuccess = function (response) {
        if (response.Message.MessageType == 1) {
            onError();
        }

        $scope.havebrokers = response.brokers.length > 0;

        angular.copy(response.brokers, $scope.brokers);
        angular.copy(response.Message.body, $scope.exception);
    };

    var onError = function () {
        $("#errorMessageModal").modal("show");
    };

    $scope.search = function () {
        alert("Search");
    };
};

module.controller("brokerGridController", ["$scope", "readEndpoint", "readBroker", brokerGridController]);
}());

和视图

<div data-ng-controller="brokerGridController">
<div>
    <div class="col-md-4">
        <div class="contacts">
            <div class="form-group multiple-form-group input-group">
                <div id="searchBrokerDropdown" class="input-group-btn input-group-select">
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                        <span class="concept">Broker Name</span> <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="#">Broker Name</a></li>
                    </ul>
                    <input type="hidden" class="input-group-select-val" name="contacts['type'][]" value="phone">
                </div>
                <input type="text" name="contacts['value'][]" class="form-control" data-ng-model="searchPhrase">
                <span class="input-group-btn searchButton">
                    <button type="button" class="btn btn-success btn-add" data-ng-click="$parent.search()"><i class="fa fa-search"></i></button>
                </span>
            </div>
        </div>
    </div>
</div>

<div>
    <div class="col-md-12">
        @Html.Partial("_Loading", new LoadingViewModel() { DisplayText = "Loading brokers..." })
        <div data-ng-show="!isBusy && !haveBrokers">
            <h3>No brokers found.</h3>
        </div>
        <div class="panel" data-ng-show="!isBusy && haveBrokers">
            <div class="panel-heading">
                <h4 class="panel-title">Brokers</h4>
                <div class="pull-right">
                    <span class="clickable filter" data-toggle="tooltip" title="Filter Brokers" data-container="body">
                        <i class="fa fa-filter"></i>
                    </span>
                </div>
            </div>
            <div class="panel-body">
                <input type="text" class="form-control" id="task-table-filter" data-action="filter" data-filters="#task-table" placeholder="Filter Tasks" />
            </div>
            <table class="table table-hover" id="task-table">
                <thead>
                    <tr>
                        <th>Broker Name</th>
                    </tr>
                </thead>
                <tbody>
                    <tr data-ng-repeat="broker in brokers">
                        <td>{{ broker.Name }}</td>
                        <td data-ng-show="searchCriteria != 'PolicyNumberLike'"><a href="#"><i class="fa fa-search"></i> View Policies</a></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

Answer 1

在这种情况下你必须检查两件事：

检查你的按钮是否在前面（升级他的z-index或检查是：hover是否正常工作），也许它不在顶部，因此无法点击。
检查那个buttont是否没有自己的$ scope（它是以子指令形式包装，例如在ng-repeat中），在taht情况检查中：

<button type="button" data-ng-click="$parent.search()"><i class="fa fa-search"></i></button>

如果这2件事情不起作用，请检查是否有任何命令。单击后，console.log（'test_mode'）将触发。

Answer 2

按钮最有可能在控制器范围之外，如果你为模型提供特定控制器，你应该将search函数放在所述控制器中，如果你想将它保存在父控制器中，请指定如下：

$scope.modalFunctions = {
  search: function () {
    //do something
  }
}

然后使用ng-click="modalFunctions.search"

Answer 3

好的，我终于找到了问题。我的角度视图位于我从Bootsnipp复制的引导向导组件（在引导模式中）。问题在于提供的javascript，

wizardContent.html(currStep.html());

这段代码用正确步骤的HTML替换了向导内容。我修改了javascript以隐藏并显示正确的步骤，而不是将正确步骤的HTML复制到显示给用户的div，这解决了问题。

ng-click不执行控制器功能

3 个答案: