Menu
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
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
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);
But this dosen't work either
494
Umm seams that DOM elements needed to be loaded first.. found my answer here 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 ! :)
i just need'ed <div ng-init="init()"> in html
178
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With