我的代码结构如下:
- main.html - 加载所有模块 - 声明 ng-app 和主 Controller - 包含 div tag-load-div
- 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 中声明的主 Controller 中编写了以下代码
$scope.showModal = false;
$scope.toggleModal = function(){
$scope.showModal = !$scope.showModal;
};
预期的行为是当我的 file3 加载时,我会在屏幕上看到一个复选框,当我单击它时,它会打开一个模态窗口,但我在看到复选框的同一页面上看到模态表单字段。当我点击它时,我得到 showModal 未定义的 Angular 异常。
我哪里错了?
最佳答案
只需要使用 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 .
关于javascript - 在 AngularJs 中调用函数 onclick,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36579524/