ng-click未执行控制器功能 [英] ng-click not executing controller function

问题描述

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

I have a very simple function in one of my angular controllers

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

从我的角度来看，我有

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

单击该按钮时永远不会执行该功能，但是控制器中的其余代码将按预期执行. ng-click指令不会触发我的功能吗?

The function is never executed when the button is clicked, but the rest of the code in my controller is executed as expected. Is there any reason why the ng-click directive will not fire my function?

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

I have similar controllers all working as expected.

更新

该按钮位于bootstrap 3模态中，当该按钮移出模态时，click事件起作用.发生这种情况的原因是什么?

The button is within a bootstrap 3 modal, when the button is moved out of the modal, the click event works. Any reason for this happening?

更新

该按钮在控制器的范围内，这是我的控制器和视图，为清楚起见

The button is within scope of the controller, here is my controller and view for clarity

(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>

推荐答案

好，我终于找到了问题所在.我的角度视图位于我从复制的引导向导组件内(在引导模态内) Bootsnipp .问题出在所提供的javascript中，

Ok, I finally found the problem. My angular view is within a bootstrap wizard component (within a bootstrap modal) that I copied from Bootsnipp. The problem was with the javascript that was supplied,

wizardContent.html(currStep.html());

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

this piece of code replaced the wizard content with the HTML of the correct step. I modified the javascript to hide and show the correct steps instead of copying the HTML of the correct step to the div displayed to the user, which resolved the issue.

这篇关于ng-click未执行控制器功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！