在AngularJs中调用函数onclick答案

【问题标题】：Calling a function onclick in AngularJs在AngularJs中调用函数onclick
【发布时间】：2016-04-12 16:53:03
【问题描述】：

我的代码结构如下：

main.html - 加载所有模块 - 声明 ng-app 和主控制器 - 包含 div tag-load-div
file1.html ...（所有其他 html 文件）- 仅包含 <div> / 子标签，并在点击等事件时加载到 main.html 中的 load-div

现在在一个这样的文件中，比如 file3.html，我有一个复选框。单击该复选框我想打开一个模式窗口 - 一个将被提交的表单。现在这是我的代码

file3.html

    <div>
        <input type="checkbox" name="your-group" value="unit-in-group" onclick="toggleModal();"/>Unit-in-group
        <modal title="some title" visible="showModal">
            <form role="form">
                <div class="form-group">
                    <label for="email">Email address</label>
                    <input type="email" class="form-control" id="email" placeholder="Enter email" />
                </div>
                <div class="form-group">
                    <label for="password">Password</label>
                    <input type="password" class="form-control" id="password" placeholder="Password" />
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
            </form>
        </modal>
    </div>

现在我已经在 main.hml 中声明的主控制器中编写了以下代码

$scope.showModal = false;
  $scope.toggleModal = function(){
    $scope.showModal = !$scope.showModal;
 };

预期的行为是，当我的 file3 加载时，我会在屏幕上看到一个复选框，当我单击它时，它将打开一个模式窗口，但我在看到复选框的同一页面上看到模式表单字段。当我点击它时，我得到了 showModal 未定义的角度异常。

我哪里错了？

【问题讨论】：

标签： javascript jquery html angularjs

【解决方案1】：

只需要使用 Angular 语法：ng-click 用于点击，ng-show 用于可见性。

 <input type="checkbox" name="your-group" value="unit-in-group" ng-click="toggleModal();"/>Unit-in-group
 <modal title="some title" ng-show="showModal">

其他选项：

您也可以使用ng-change 代替ng-click，在这种情况下不会有太大区别。

或者您可以使用ng-model (ng-model="showModal") 并完全摆脱您的切换功能Example。

【讨论】：

【解决方案2】：

我也遇到过类似的问题。

要检测点击，请使用 Angular 语法：(click)="toggleModal();"

<input type="checkbox" name="your-group" value="unit-in-group" (click)="toggleModal();"/>

我希望这会有所帮助。

【讨论】：

【解决方案3】：

另一种方法是使用ngChange directive 检测复选框被选中

<input type="checkbox" name="your-group" value="unit-in-group" ng-change="toggleModal();"/>

模态代码与建议的其他答案相同

 <modal title="some title" ng-show="showModal">

【讨论】：