角度模態實例無法讀取DOM元素

Question

嗨我玩角度模態實例..

但是當我在模態控制器中聲明一個querySelector時，它給出了無法讀取屬性'querySelector'為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);

        };

所以它接縫像，在模型中找不到dom元素..：s我可以嘗試加載，首先使用$modalInstance.opened.then($scope.init);建模到dom $modalInstance.opened.then($scope.init); 但這也不起作用

Answer 1

Umm接縫需要首先加載DOM元素..在這里找到我的答案https://github.com/angular-ui/bootstrap/issues/2586

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

這首先初始化dom elemtens，所以查詢選擇器可以看到dom元素！ :)

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

Answer 2

在模板加載並注入DOM之前，控制器被實例化。 一般來說，在控制器中執行此類DOM操作並不是一個好主意。 你應該為此創建指令。 例如：

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

並像這樣使用它：

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

Answer 3

我同意dfsk，這是一個更優雅的解決方案，只要確保，如果這是一個bootstrap ui-tab的一部分，不要忘記添加ng-if =“activeTab = 2”，其中2是零 - 簽名選項卡所在的索引選項卡。 activeTab是包含當前選項卡的范圍變量。 等到DOM更新（通過$ timeout（fn（）{}））。 那時可以很好地訪問和處理canvas元素的正確尺寸。

角度模態實例無法讀取DOM元素

問題描述

3 個解決方案

解決方案1
3 2015-02-18 14:07:19

解決方案2
0 2015-02-18 14:11:19

解決方案3
0 2017-12-31 03:08:34

角度模態實例無法讀取DOM元素

問題描述

3 個解決方案

解決方案1 3 2015-02-18 14:07:19

解決方案2 0 2015-02-18 14:11:19

解決方案3 0 2017-12-31 03:08:34

解決方案1
3 2015-02-18 14:07:19

解決方案2
0 2015-02-18 14:11:19

解決方案3
0 2017-12-31 03:08:34