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

苏拉杰

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

  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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

Angular JS-在外部控制器中调用指令函数

如何在指令链接中访问angular $ scope控制器?

如何在angular.js中动态更改指令控制器

Angular指令调用父控制器函数

如何在Angular 1.6.7的子组件中调用父控制器函数

如何从页面中的jQuery调用Angular JS函数控制器

如何在Angular.js中访问控制器

Angular:如何使用ng-if或其他Angular指令从HTML视图中调用控制器函数

如何在Angular JS的子控制器中访问父控制器数据

Angular-在子指令的控制器中获取父指令的控制器(不是链接功能)

在Angular中创建后立即调用控制器函数

angular:调用控制器函数中的重复项

如何从promise方法内部访问angular js控制器的“ this”?

如何为相同的路由链接在Angular 4中调用组件控制器?

如何在Angular JS中的另一个控制器中调用/触发一个控制器功能

如何链接到Angular中的不同控制器

angular JS控制器中的函数调用以随机顺序执行

在控制器中模拟angular js服务调用

错误“控制器名称”不是angular js中的函数?

在控制器中调用angular $ setValidity

如何在指令Angular js的链接函数中确定变量的初始化顺序

如何在angular js控制器中使用alasql?

带有控制器数据绑定的Angular JS指令调用

从Angular指令内的ng-click中调用父控制器中的方法

如何在angular2的同一控制器内的另一个函数中调用一个函数

如何从Angular指令中调用函数

指令的控制器的Angular JS更改属性

如何从Angular JS中的控制器更改视图?

Angular 指令将参数传递给元素的 .html() 中的控制器函数