我正在尝试用 Angular JS 制作一个快照 SVG 矩形

Question

这是我的代码，在更改其宽度&身高但它不会随着新值而改变它的值。我想改变高度&运行时rect的宽度。

 <div ng-app='app'>
    <div ng-controller="ctrlSizing">
        <label id="wid" style="visibility: hidden">Width: <input ng-model="wid" type="number" placeholder="How about 100"></label>
        <label id="hei" style="visibility: hidden">Height: <input ng-model="hei" type="number" placeholder="How about 100"></label>
        <div id="circle">
            <svg id="SVG" visibility="hidden" onclick="cInput()" style="height: 300; width: 300; position:absolute; left: 0px;top: 50px;">
            </svg>
        </div>
    </div>
</div>
var app = angular.module('app', []);
app.controller('ctrlSizing', function($scope) {
    $scope.$watch('wid', function (newVal, oldVal) {
        if (newVal === oldVal) {
            var s = Snap("#SVG");
            $scope.rectangle = s.rect(150, 150, 0, 0);
            //console.log($scope.circle);
        } else {
            $scope.rectangle.animate({w: newVal}, 500);
            //$scope.rectangle.animate({h: newVal}, 500);
        }
    });
});
    app.controller('ctrlSizing', function($scope) {
    $scope.$watch('hei', function (newval, oldval) {
        if (newval === oldval) {
             var s = Snap("#SVG");
             $scope.rectangle = s.rect(150, 150, 70, 50);
             //console.log($scope.circle);
        } else {
                $scope.rectangle.animate({h: newVal}, 500);
            }
    });
});

Answer 1

我想这就是您想要的。

HTML

<div ng-app ng-controller="myctrl">
    <div>width:<input ng-model="width"></div>
    <div>height:<input ng-model="height"></div>
</div>

javascript

function myctrl($scope){
    $scope.width = 100;
    $scope.height = 100;
    var s = Snap();
    var rec = s.rect(0, 0, 100, 100);
    $scope.$watch('width', function(value){
        rec.animate({width: value}, 500, mina.easein);
    });
    $scope.$watch('height', function(value){
        rec.animate({height: value}, 500, mina.easein);
    });
}

jsfiddle来了。