用Angular指令構建動態矩形

Question

最近我寫了一個D3項目，所以我需要一個動態矩形。我使用Angular創建了一個動態可視化。我有兩個input類型rang，第一個會改變矩形的「寬度」，第二個會改變「高度」。但是我不知道如何使用角度來繪製動態矩形。 這是我的代碼：

<div ng-app="myApp"> 
    <rect-designer/> 
    <div> 
    <input type="range" ng-model="rectWidth" min="0" max="400" value="0"/> 
    <input type="range" ng-model="rectHeight" min="0" max="700" value="0"/> 
    </div> 
</div> 

這裏是我的JavaScript代碼：

var App = angular.module('myApp', []); 
App.directive('rectDesigner', function() { 
    function link(scope, el, attr) { 

var svgwidth=1000, svgheight=600; 
var svgContainer = d3.select(el[0]).append('svg').attr('id','svgcontainer') 
     .attr({ width: svgwidth, height: svgheight }); 

scope.$watchGroup(['rectWidth','rectHeight'], function() { 

     svgContainer.append("rect").attr("id", "Rect") 
     .attr({ width: rectWidth, height: rectHeigh }) 
     .attr('transform', 'translate(' + width/2 + ',' + height/2 + ')') 


    },true); 
    }return { 

    link: link, 
    scope: { 
     rectHeigh: '=', 
     rectWidth: '=', 

    }, 
    restrict: 'E' 
}; 
}); 

我不知道是否有什麼辦法，使svgWidth和svgheight動態的，我用這個代碼，但結果是undefined。

scope.$watch(function(){ 
      svgWidth = el.clientWidth; 
      svgHeight = el.clientHeight; 
    }); 

Answer 1

您在這裏缺少一些基本知識：

1. 你沒有一個控制器。
2. 你正在看的變量不是你的指令的一部分，但他們應該是缺失控制器的一部分。
3. 由於這些變量不是指令的一部分，因此不需要將它們返回到它的範圍（再次，它們將位於控制器中）。
4. $scope.watchGroup有一個回調函數newValues。這是變化後的變量。
5. 你想追加rect的SVG，然後操縱它的寬度/高度。每當寬度/高度改變時，您都不想重新添加它。

所以把所有這些組合起來：

var App = angular.module('myApp', []); 

var Ctrl = App.controller('myCtrl', ['$scope', function($scope) { 

    // I always like to give them defaults in code 
    $scope.rectWidth = 50; 
    $scope.rectHeight = 50; 

}]); 

Ctrl.directive('rectDesigner', function() { 

    function link(scope, el, attr) { 

    var svgwidth = 500, 
     svgheight = 600; 

    var svgContainer = d3.select(el[0]) 
     .append('svg') 
     .attr('id', 'svgcontainer') 
     .attr({ 
     width: svgwidth, 
     height: svgheight 
     }); 
    // only append one rect 
    var rect = svgContainer 
     .append("rect") 
     .attr("id", "Rect") 
     .attr('transform', 'translate(' + svgwidth/2 + ',' + svgheight/2 + ')'); 

    scope.$watchGroup(['rectWidth', 'rectHeight'], function(newValues) { 

     var width = newValues[0]; 
     var height = newValues[1]; 

     // now change it's width and height 
     rect.attr({ 
     width: width, 
     height: height 
     }); 

    }, true); 
    } 
    return { 
    link: link, 
    }; 
}); 

例here。