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

这里的例子。