在Angular中调用onclick函数

Question

我的代码具有以下结构：

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

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

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的角度异常。

我要去哪里错了？

Answer 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"）和摆脱你的切换功能完全的例子。