Question

我创建了一个包含链接和控制器的自定义指令。代码是

  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函数。我在我的HTML中调用ng-change事件中的控制器内的函数。

<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>

Answer 1

我会删除scope: true,并将函数绑定到范围。

Answer 2

在指令中使用isolate-scope ..

$scope.control.moveNeedle = function () {
$scope.ScoreRotateNeedle();
 }
return {
            scope: **{control: '='}**,
            restrict: 'E',
            templateUrl: 'svgmeter.html',
            link: link,
            controller: 'delightMeterController'

        };

将此代码添加到您的控制器

$scope.ctrl = {};

在HTML中使用

<div ng-app="delightMeterApp" ng-controller="delightMeterController">
    <delight-meter ng-model="delightScore" control = "ctrl"></delight-meter>
    <input id="Text1" type="text" ng-model="delightScore" ng-change="ctrl.rotateNeedle()" />
</div>

Answer 3

在您的代码中尝试此操作：

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;

})

Angular JS：如何在angular指令中从控制器调用链接内的函数

3 个答案: