使用Angular指令構建動態矩形

Question

最近，我用D3編寫了一個項目，因此我需要一個動態矩形。 我用角創建動態visualization.I具有兩個input類型rang ，第一個將改變矩形的“寬度”和第二將改變“height'.However我不知道如何使用角度來繪制動態矩形。 這是我的代碼：

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

這里的例子。