我创建了一个具有链接和控制器的自定义指令。该代码是
var delightMeterApp = angular.module('delightMeterApp', []);
delightMeterApp.directive('delightMeter', function () {
function link($scope, $element, $attrs) {
document.getElementById("arc1").setAttribute("d", describeArc(200, 200, 100, -90, -56));
document.getElementById("arc2").setAttribute("d", describeArc(200, 200, 100, -54, -20));
document.getElementById("arc3").setAttribute("d", describeArc(200, 200, 100, -18, 16));
document.getElementById("arc4").setAttribute("d", describeArc(200, 200, 100, 18, 52));
document.getElementById("arc5").setAttribute("d", describeArc(200, 200, 100, 54, 90));
function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
var angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0;
return {
x: centerX + (radius * Math.cos(angleInRadians)),
y: centerY + (radius * Math.sin(angleInRadians))
};
}
function describeArc(x, y, radius, startAngle, endAngle) {
var start = polarToCartesian(x, y, radius, endAngle);
var end = polarToCartesian(x, y, radius, startAngle);
var arcSweep = endAngle - startAngle <= 180 ? "0" : "1";
var d = [
"M", start.x, start.y,
"A", radius, radius, 0, arcSweep, 0, end.x, end.y
].join(" ");
return d;
}
function ScoreRotateNeedle(delightScore) {
$('.needleset').css({
"transform": "rotate(" + delightScore + "deg)",
"transform-origin": "50% 95%"
});
}
$scope.$watch('score', function() {
ScoreRotateNeedle($scope.score);
});
}
return {
scope: {
score: '=ngModel'
},
restrict: 'E',
templateUrl: 'svgmeter.html',
link: link,
controller: 'delightMeterController'
};
});
delightMeterApp.controller('delightMeterController', function ($scope) {
$scope.delightScore = 0;
});
我想ScoreRotateNeedle
从控制器调用链接内部的函数。我ng-change
像这样在HTML上的事件中调用控制器内部的函数。
<div ng-controller="delightMeterController">
<delight-meter ng-model="delightScore"></delight-meter>
<input id="txtScore" type="text" ng-model="delightScore" />{{delightScore}}
</div>
因为不是在控制器内包含DOM操作的好方法,所以我希望在链接内或其他位置具有此功能。我怎样才能做到这一点或应该使用一项服务?
更新:
<div id="delightmeter">
<svg width='500px' height='300px' version='1.1' xmlns='http://www.w3.org/2000/svg'>
<g>
<text x='100' y='220' fill='black'>0</text>
<text x='300' y='220' fill='black'>100</text>
<path class='arc' id='arc1' d='' />
<path class='arc' id='arc2' d='' />
<path class='arc' id='arc3' d='' />
<path class='arc' id='arc4' d='' />
<path class='arc' id='arc5' d='' />
<g class='needleset'>
<circle class='needle-center' cx='200' cy='200' r='5'></circle>
<path class='needle' d='M 195 198 L 200 100 L 205 202'></path>
<circle class='needle-center' cx='200' cy='200' r='5'></circle>
</g>
</g>
</svg>
</div>
在您的代码中尝试以下操作:
HTML:
<div ng-controller="delightMeterController">
<delightmeter ng-model="delightScore"></delightmeter>
<input id="txtScore" type="text" ng-model="delightScore" />{{delightScore}}
</div>
指示:
.directive('delightmeter', function () {
function link($scope, $element, $attrs) {
var meter = $element[0];
console.log(meter);
document.getElementById("arc1").setAttribute("d", describeArc(200, 200, 100, -90, -56));
document.getElementById("arc2").setAttribute("d", describeArc(200, 200, 100, -54, -20));
document.getElementById("arc3").setAttribute("d", describeArc(200, 200, 100, -18, 16));
document.getElementById("arc4").setAttribute("d", describeArc(200, 200, 100, 18, 52));
document.getElementById("arc5").setAttribute("d", describeArc(200, 200, 100, 54, 90));
function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
var angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0;
return {
x: centerX + (radius * Math.cos(angleInRadians)),
y: centerY + (radius * Math.sin(angleInRadians))
};
}
function describeArc(x, y, radius, startAngle, endAngle) {
var start = polarToCartesian(x, y, radius, endAngle);
var end = polarToCartesian(x, y, radius, startAngle);
var arcSweep = endAngle - startAngle <= 180 ? "0" : "1";
var d = [
"M", start.x, start.y,
"A", radius, radius, 0, arcSweep, 0, end.x, end.y
].join(" ");
return d;
}
function ScoreRotateNeedle(delightScore) {
$('.needleset').css({
"transform": "rotate(" + delightScore + "deg)",
"transform-origin": "50% 95%"
});
}
$scope.$watch('score', function() {
ScoreRotateNeedle($scope.score);
});
}
return {
restrict: 'E',
templateUrl: 'components/comp01/comp01.html',
scope: {
score: '=ngModel'
},
link: link
};
})
控制器:
.controller('delightMeterController', function ($scope) {
$scope.delightScore = 0;
})
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句