在 AngularJs 中調用 onclick 函數

Question

我的代碼具有以下結構：

1. main.html - 加載所有模塊 - 聲明 ng-app 和主控制器 - 包含 div tag-load-div
2. file1.html ...（所有其他 html 文件）- 僅包含<div> / 子標簽，並在單擊等事件時加載到位於 main.html 中的 load-div

現在在一個這樣的文件中，比如file3.html，我有一個復選框。 單擊該復選框我想打開一個模態窗口 - 將提交的表單。 現在這是我的代碼

文件3.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" ) 並完全擺脫您的切換功能Example 。

Answer 2

另一種方法是使用ngChange 指令來檢測復選框是否被選中

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

模態代碼與建議的其他答案相同

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

Answer 3

我有一個類似的問題。

要檢測點擊，請使用 Angular 語法： (click)="toggleModal();"

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

我希望這有幫助。