gpt4 book ai didi

javascript - Angular 模态实例无法读取 DOM 元素

转载 作者:行者123 更新时间:2023-11-29 10:41:16 26 4
gpt4 key购买 nike

嗨,我正在玩 Angular 模态实例..

但是当我在模态 Controller 中声明一个 querySelector 时,它给出控制台错误 Cannot read property 'querySelector' of null

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 - 模态实例 Controller

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);

};

所以它像这样接缝,在模型中找不到 dom 元素..:s我可以尝试加载,首先使用 $modalInstance.opened.then($scope.init); 将模型加载到 dom 中但这也行不通

最佳答案

嗯,需要首先加载 DOM 元素的接缝。在这里找到了我的答案 https://github.com/angular-ui/bootstrap/issues/2586

    $scope.init = function() {
var wrapper = document.getElementById("signature-pad"),
...
}
$modalInstance.opened.then($scope.init);

这首先初始化了 dom 元素,所以查询选择器可以看到 dom 元素! :)

我只需要 <div ng-init="init()"> in html

关于javascript - Angular 模态实例无法读取 DOM 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28585381/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com