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

查看：19
本文介绍了ng-click 不执行控制器功能的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

$scope.search = function () {警报(搜索")；};

我认为我有

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

该函数在按钮被点击时永远不会执行，但我的控制器中的其余代码按预期执行.ng-click 指令不会触发我的函数有什么原因吗?

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

更新

按钮在引导程序 3 模态内，当按钮移出模态时，单击事件起作用.发生这种情况有什么原因吗?

更新

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

(函数(){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 = 函数(响应){$scope.endpoint = response.Endpoint;};readEndpoint.read("BusinessLogicAPI").then(setEndpoint);var onSuccess = 函数(响应){如果(响应.消息.消息类型 == 1){onError();}$scope.havebrokers = response.brokers.length >0;angular.copy(response.brokers, $scope.brokers);angular.copy(response.Message.body, $scope.exception);};var onError = 函数 () {$("#errorMessageModal").modal("show");};$scope.search = 函数 () {警报(搜索")；};};module.controller("brokerGridController", ["$scope", "readEndpoint", "readBroker", brokerGridController]);}());

和视图

<div><div class="col-md-4"><div class="联系人"><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">经纪商名称</span><span class="caret"></span><ul class="dropdown-menu" role="menu"><li><a href="#">经纪商名称</a></li><input type="hidden" class="input-group-select-val" name="contacts['type'][]" value="phone">
<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></span>

<div><div class="col-md-12">@Html.Partial("_Loading", new LoadingViewModel() { DisplayText = "Loading brokers..." })<div data-ng-show="!isBusy && !haveBrokers"><h3>未找到经纪人.</h3>

<div class="panel" data-ng-show="!isBusy &&haveBrokers"><div class="panel-heading"><h4 class="panel-title">经纪人</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 class="panel-body"><input type="text" class="form-control" id="task-table-filter" data-action="filter" data-filters="#task-table" placeholder="过滤任务"/>

<table class="table table-hover" id="task-table"><头><tr><th>经纪人名称</th></tr></thead><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>查看政策</a></td></tr></tbody>

解决方案

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

wizardContent.html(currStep.html());

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

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

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

and from my view I have 

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

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.

Update

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?

Update

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]);
}());

and the view

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

解决方案

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

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屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆