angularjs - ng-include 中的自定义指令不起作用 [英] angularjs - custom directive in ng-include not working
问题描述
我已经尝试使用此代码段在我的应用程序中使用 bs3 模态,并且效果很好.http://jsfiddle.net/alexsuch/RLQhh/
但是,我想将 modal 和其他一些 html 标签的代码包装到一个模板中以实现可重用性.
<h1>模态示例</h1><button ng-click="toggleModal()" class="btn btn-default">打开模态</button><div ng-include src="'modal.html'"></div><script type="text/ng-template" id="modal.html"><modal title="登录表单"visible="showModal"><表单角色=表单"><div class="form-group"><label for="email">电子邮件地址</label><input type="email" class="form-control" id="email" placeholder="输入电子邮件"/><div class="form-group"><label for="password">密码</label><input type="password" class="form-control" id="password" placeholder="密码"/>
<button type="submit" class="btn btn-default">提交</button></表单></modal>
这是我的 jsFiddle http://jsfiddle.net/wangjunji/gL7scbd9/
那么问题来了.切换按钮仅在第一次有效.我知道 ng-include 指令将创建一个子作用域,这使得父作用域中的变量无法访问,但我不知道解决这个棘手的问题.有人可以帮忙吗?
谢谢.
我对您的代码进行了一些更改,因此布尔值将驻留在对象中,现在您只需要观察:
控制器变化:
mymodal.controller('MainCtrl', function ($scope) {$scope.modalObj = { showModal : false };$scope.toggleModal = function(){$scope.modalObj.showModal = !$scope.modalObj.showModal;};});
指令(主要)变更:
scope.$watch(function() { return scope.modalObj.showModal; }, function(value){如果(值 == 真)$(element).modal('show');别的$(元素).modal('隐藏');});
当然,这些行现在将引用 scope.modalObj.showModal
而不是使用 parent/attr 关键字,通常你应该尽量避免这些.
I've tried this snippet for using bs3 modal in my application and it works fine. http://jsfiddle.net/alexsuch/RLQhh/
However,I want to wrap the code of modal and some other html tags into a template for reusability.
<div ng-controller="MainCtrl" class="container">
<h1>Modal example</h1>
<button ng-click="toggleModal()" class="btn btn-default">Open modal</button>
<div ng-include src="'modal.html'"></div>
<script type="text/ng-template" id="modal.html">
<modal title="Login form" 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>
</script>
</div>
Here is my jsFiddle http://jsfiddle.net/wangjunji/gL7scbd9/
Then comes the question.The toggle button only works for the first time. I know that ng-include directive will create a child scope which makes the variable in parent scope unreachable but I have no idea to work out this sticky problem.Can anyone help?
Thanks.
I've changed your code a little bit so the boolean value will reside inside an object, and now you just have to watch that instead:
Controller changes:
mymodal.controller('MainCtrl', function ($scope) {
$scope.modalObj = { showModal : false };
$scope.toggleModal = function(){
$scope.modalObj.showModal = !$scope.modalObj.showModal;
};
});
Directive (main) change:
scope.$watch(function () { return scope.modalObj.showModal; }, function(value){
if(value == true)
$(element).modal('show');
else
$(element).modal('hide');
});
And also of course the lines will now refer to scope.modalObj.showModal
instead of using the parent/attr keywords, in general you should try to avoid those.
这篇关于angularjs - ng-include 中的自定义指令不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!