角度模态实例无法读取DOM元素
[英]Angular modal instance can't read DOM elements
问题描述
Hi im playing with angular modal instance.. 
嗨我玩角度模态实例..
But when i declare a querySelector in the modal controler it gives console error of Cannot read property 'querySelector' of null 但是当我在模态控制器中声明一个querySelector时，它给出了无法读取属性'querySelector'为null的控制台错误
HTML HTML
<body>
<div id="signature-pad">
<canvas width="300" height="300"></canvas>
<div class="description">Sign above</div>
<button class="button clear" data-action="clear">Clear</button>
</div>
</body>
<div class="modal-footer">
<button class="btn btn-success btn-lg" ng-click="ok();">Gem & Godkend</button>
<button class="btn btn-warning btn-lg" ng-click="cancel()">Annuler</button>
</div>
JS - ModalInstanceController JS - ModalInstanceController
var ModalInstanceCtrl = function ($scope, $modalInstance) {
$scope.init = function() {
var wrapper = document.getElementById("signature-pad"),
clearButton = wrapper.querySelector("[data-action=clear]"),
canvas = wrapper.querySelector("canvas"),
signaturePad;
signaturePad = new SignaturePad(canvas);
clearButton.addEventListener("click", function (event) {
signaturePad.clear();
});
$scope.ok = function () {
$modalInstance.close(signaturePad.toDataURL());
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
};
$modalInstance.opened.then($scope.init);
};
So it seams like it, can't find dom elements in model .. :s As you i can i tried to load, model into dom first with $modalInstance.opened.then($scope.init); 所以它接缝像，在模型中找不到dom元素..：s我可以尝试加载，首先使用$modalInstance.opened.then($scope.init);建模到dom $modalInstance.opened.then($scope.init); But this dosen't work either 但这也不起作用
3 个解决方案
解决方案1
3 2015-02-18 14:07:19
Umm seams that DOM elements needed to be loaded first.. found my answer here https://github.com/angular-ui/bootstrap/issues/2586 Umm接缝需要首先加载DOM元素..在这里找到我的答案https://github.com/angular-ui/bootstrap/issues/2586
$scope.init = function() {
var wrapper = document.getElementById("signature-pad"),
...
}
$modalInstance.opened.then($scope.init);
this initialize the dom elemtens first, so query selector can see the dom elements ! 这首先初始化dom elemtens，所以查询选择器可以看到dom元素！ :) :)
i just need'ed <div ng-init="init()"> in html 我只需要<div ng-init="init()"> in html
解决方案2
0 2015-02-18 14:11:19
Controller is instantiated before template is loaded and injected in DOM. 在模板加载并注入DOM之前，控制器被实例化。 In general this is not very good idea do perform such DOM manipulations in controller. 一般来说，在控制器中执行此类DOM操作并不是一个好主意。 You should create directive for this. 你应该为此创建指令。 For example: 例如：
add.directive('signaturePad', function() {
return {
link: function(scope, element) {
var wrapper = element[0],
clearButton = wrapper.querySelector("[data-action=clear]"),
saveButton = wrapper.querySelector("[data-action=save]"),
canvas = wrapper.querySelector("canvas"),
signaturePad;
signaturePad = new SignaturePad(canvas);
clearButton.addEventListener("click", function (event) {
signaturePad.clear();
});
}
};
});
and use it like this: 并像这样使用它：
<div signature-pad id="signature-pad">
<canvas width="100" height="100"></canvas>
<div class="description">Sign above</div>
<button class="button clear" data-action="clear">Clear</button>
<button class="button save" data-action="save">Save</button>
</div>
解决方案3
0 2017-12-31 03:08:34
I concur with dfsk, that's a more elegant solution, just make sure that, if this is is part of a bootstrap ui-tab, do not forget to add an ng-if="activeTab=2", where 2 is the zero-indexed tab where the signature-pad lives. 我同意dfsk，这是一个更优雅的解决方案，只要确保，如果这是一个bootstrap ui-tab的一部分，不要忘记添加ng-if =“activeTab = 2”，其中2是零 - 签名选项卡所在的索引选项卡。 activeTab is a scope variable containing the current tab. activeTab是包含当前选项卡的范围变量。 And wait till the DOM updates (via $timeout(fn(){})). 等到DOM更新（通过$ timeout（fn（）{}））。 That's when the right dimensions of the canvas element can be accessed and handled nicely. 那时可以很好地访问和处理canvas元素的正确尺寸。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.