Построить динамический прямоугольник с угловой директивой

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.