Question

我创建了一个简单的页面来测试DOM控件和滚动条功能。测试的目的是1）观察范围变量的变化（在这种情况下是$ scope.clicks或者点击鼠标来改变内联SVG的大小以观察滚动条的反应。它适用于Chrome和IE11.Firefox似乎无法解析document.getElementById或angular.element（document.querySelector）。

var app = angular.module('miniapp', []);

app.controller('testCtrl', function ($scope) {
    $scope.handleClick = function ($event) {
        var w1 = document.getElementById('svg-head');
        var cH = w1.clientHeight + 20;
        var cW = w1.clientWidth + 20;
        $scope.myHeight = cH;
        $scope.myWidth = cW;
        $scope.viewString = '0 0 ' + cH + ' ' + cW;

    };
    $scope.clicks = 0;
    $scope.addclicks = function () {
        $scope.clicks += 1;
    };
    $scope.$watch("clicks", function (newValue, oldValue) {
        var w2 = angular.element(document.querySelector('#svg-head'))[0];
        var cH = w2.clientHeight + 20;
        var cW = w2.clientWidth + 20;
        $scope.myHeight = cH;
        $scope.myWidth = cW;
    });
});

html body {
    font-family: monospace;
    font-size: 120%;
}

.div1 {
    position:  relative;
    float: left;
    border: 3px solid blue;
    height: 200px;
    width: 350px;

}

.div2 {
    position: inherit;
    float: left;
    border: 3px solid red;
    height: 100%;
    width: 100%;
    overflow-y: scroll;
    overflow-x: scroll;
}

svg {
    position: inherit;
    float: inherit;
    border: 3px solid green;
    height: 100%;
    width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<html ng-app="miniapp">
    <title>H & W</title>
</head>
<body ng-controller="testCtrl">
<div id="div0">
    <button ng-click="addclicks()">clickme</button>
    <div class="div1 container" id="one" ng-click="handleClick($event)" resize>
        <div class="div2 container" id="two">
            <svg
                    class="svg-class"
                    ng-style="{ 'width' : myWidth, 'height' : myHeight }"
                    id="svg-head" xmlns="http://www.w3.org/2000/svg">
                <defs>
                </defs>

                <g>
                    <rect
                            height=50
                            width=125
                            id="rect-1"
                            style="fill: yellow;"
                            >
                    </rect>
                    <rect
                            x="200"
                            y="200"
                            height=50
                            width=125
                            id="rect-2"
                            style="fill: blue;"
                            >
                    </rect>
                </g>
            </svg>
        </div>
    </div>
    <prog>{{clicks}} - {{myHeight}} x {{myWidth}}</prog>
</div>
</body>
</html>

Angular DOM控件在Firefox中不起作用，但在Chrome和IE11中运行正常

0 个答案: