I am trying to display a modal when the view is loaded.
我正在尝试在加载视图时显示模态。
Code :
代码:
//View
<div id="showCom" ng-controller="showmodalCtrl" ng-init="init()">
<div class="modal fade" id="companyModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Please Select Company</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label class="control-label">Recipient:</label>
<input type="text" class="form-control">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</div>
//Controller
.controller('showmodalCtrl', ['$scope', function($scope){
$scope.init = function(){
$('#companyModal').modal("show");
}
}])
Everything works fine and the modal is displayed but I get this error on the console :
一切正常,显示模态,但我在控制台上收到此错误:
Type error : Cannot read property 'childNodes' of undefined
I have no idea why this is happening. Also if I remove the "form" from the modal , i don't get any error. So I guess the problem is with the form but I am not able to resolve it.
我不知道为什么会这样。此外,如果我从模态中删除“表单”,我不会收到任何错误。所以我猜问题是表单,但我无法解决它。
Thanks in advance.
提前致谢。
5 个解决方案
#1
41
I had the same problem and I managed to resolve it by wrapping the modal open function inside a $timeout() or a normal setTimeout() function.
我遇到了同样的问题,我设法通过将模态打开函数包装在$ timeout()或普通的setTimeout()函数中来解决它。
setTimeout(function(){
jQuery('#messageModal').modal('show');
}, 0);
#2
13
I had the same error message when trying to use a JQuery plugin. Running it after document ready resolved the issue for me. The plugin was running fine but the angular code that followed in the current scope was not.
尝试使用JQuery插件时,我有相同的错误消息。文档就绪后运行它为我解决了问题。该插件运行正常,但当前范围中的角度代码不是。
It was the "Set timeout"-answer in this thread that led me to try this solution.
正是这个线程中的“设置超时” - 让我尝试了这个解决方案。
Solution for me:
我的解决方案:
angular.element(document).ready(function () {
//Angular breaks if this is done earlier than document ready.
setupSliderPlugin();
});
#3
4
As another solution in AngularJS context I'm using this approach:
作为AngularJS上下文中的另一个解决方案,我正在使用这种方法:
- Include
$timeout
module in your JS controller - 在JS控制器中包含$ timeout模块
- Run
init()
function with all initializers like this:$timeout(init, 0);
$ timeout(init,0);
Works good.
效果很好。
#4
2
Sorry for edit. Is your HTML well formed? Check that all the tags match.
抱歉编辑。你的HTML格式正确吗?检查所有标签是否匹配。
In your code snippet, it looks like you're missing a closing div. check that - the one that closes the controller div.
在您的代码段中,您似乎错过了结束div。检查 - 关闭控制器div的那个。
#5
2
I had a similar problem. It would throw an exception when i tried to add some html to dom and compile it using $compile in angularJs.
我有类似的问题。当我试图将一些html添加到dom并使用angularJs中的$ compile编译它时会抛出异常。
Inside of the html was another directive that tried to add some dom element from the page to somewhere else in the page.
在html里面是另一个指令,试图将页面中的一些dom元素添加到页面中的其他位置。
I just had to call .clone of that element before i moved it to the new location. And the exception was gone.
在将其移动到新位置之前,我只需要调用该元素的.clone。异常消失了。
$popupContent = $(attrs.popupSelector).clone();
$container = $('<div class="popup-container"></div>');
$container.append($popupContent);
$container.hide();
$('body').append($container);
#1
41
I had the same problem and I managed to resolve it by wrapping the modal open function inside a $timeout() or a normal setTimeout() function.
我遇到了同样的问题,我设法通过将模态打开函数包装在$ timeout()或普通的setTimeout()函数中来解决它。
setTimeout(function(){
jQuery('#messageModal').modal('show');
}, 0);
#2
13
I had the same error message when trying to use a JQuery plugin. Running it after document ready resolved the issue for me. The plugin was running fine but the angular code that followed in the current scope was not.
尝试使用JQuery插件时,我有相同的错误消息。文档就绪后运行它为我解决了问题。该插件运行正常,但当前范围中的角度代码不是。
It was the "Set timeout"-answer in this thread that led me to try this solution.
正是这个线程中的“设置超时” - 让我尝试了这个解决方案。
Solution for me:
我的解决方案:
angular.element(document).ready(function () {
//Angular breaks if this is done earlier than document ready.
setupSliderPlugin();
});
#3
4
As another solution in AngularJS context I'm using this approach:
作为AngularJS上下文中的另一个解决方案,我正在使用这种方法:
- Include
$timeout
module in your JS controller - 在JS控制器中包含$ timeout模块
- Run
init()
function with all initializers like this:$timeout(init, 0);
$ timeout(init,0);
Works good.
效果很好。
#4
2
Sorry for edit. Is your HTML well formed? Check that all the tags match.
抱歉编辑。你的HTML格式正确吗?检查所有标签是否匹配。
In your code snippet, it looks like you're missing a closing div. check that - the one that closes the controller div.
在您的代码段中,您似乎错过了结束div。检查 - 关闭控制器div的那个。
#5
2
I had a similar problem. It would throw an exception when i tried to add some html to dom and compile it using $compile in angularJs.
我有类似的问题。当我试图将一些html添加到dom并使用angularJs中的$ compile编译它时会抛出异常。
Inside of the html was another directive that tried to add some dom element from the page to somewhere else in the page.
在html里面是另一个指令,试图将页面中的一些dom元素添加到页面中的其他位置。
I just had to call .clone of that element before i moved it to the new location. And the exception was gone.
在将其移动到新位置之前,我只需要调用该元素的.clone。异常消失了。
$popupContent = $(attrs.popupSelector).clone();
$container = $('<div class="popup-container"></div>');
$container.append($popupContent);
$container.hide();
$('body').append($container);