Question

我使用Angular JS创建了一个自定义指令。我在控制器内部有一个功能，我试图从文本框调用ng-change事件。但是这个功能没有被调用。这是我的代码：

<script>
    var delightMeterApp = angular.module('delightMeterApp', []);
    delightMeterApp.directive('delightMeter', function () {
        return {
            scope: true,
            restrict: 'E',
            template: '<div id="delightmeter"></div>',
            link: function (scope, element) {


                newdiv = jQuery('<div/>', {
                    id: 'delightContainer',
                    class: 'singlenote'
                }).appendTo('#delightmeter');

                var appendstring = "";
                appendstring += "<svg width='500px' height='300px' version='1.1' xmlns='http://www.w3.org/2000/svg>'";
                appendstring += "<g>";
                appendstring += "<text x='100' y='220' fill='black'>0</text>";
                appendstring += "<text x='300' y='220' fill='black'>100</text>";
                appendstring += "<path class='arc' id='arc1' d='' />";
                appendstring += "<path class='arc' id='arc2' d='' />";
                appendstring += "<path class='arc' id='arc3' d='' />";
                appendstring += "<path class='arc' id='arc4' d='' />";
                appendstring += "<path class='arc' id='arc5' d='' />";
                appendstring += "<g class='needleset'>";
                appendstring += "<circle class='needle-center' cx='200' cy='200' r='5'></circle>";
                appendstring += "<path class='needle' d='M 195 198 L 200 100 L 205 202'></path>";
                appendstring += "</g></g></svg>";

                newdiv.append(appendstring);

                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;
                }
            },
            template: '<div id="delightmeter"></div>',
            controller: "delightMeterController"

        };
    });
    delightMeterApp.controller('delightMeterController', function ($scope) {

        $scope.fun = function () {
            alert("called");
        }
    });
</script>

以下是我的HTML

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

对自定义指令和输入控件使用相同的控制器是否正确。我在这做错了什么？

Answer 1

Sooraj，

就像NexusDuck所说的那样，你永远不应该操纵控制器中的DOM。我重新组织了你的代码，在Directive和Controller中使用DOM操作来调用Rotate Needle函数。旋转针功能确实在指令中被调用。

这是HTML

<div ng-controller="delightMeterController">
<delightmeter delight-meter-reference='delightMeterReference'></delightmeter>
<input id="txtScore" type="text" ng-model="delightScore" ng-change="delightMeterReference.RotateNeedle(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 RotateNeedle(delightScore) {
            console.log(delightScore);
            $('.needleset').css({
                "transform": "rotate(" + delightScore + "deg)",
                "transform-origin": "50% 95%"
            });
        }

        if ($scope.delightMeterReference) {
            $scope.delightMeterReference.RotateNeedle = function (delightScore) {
                RotateNeedle(delightScore);
            }
        }
    }
    return {
        restrict: 'E',
        templateUrl: 'components/comp01/comp01.html',
        scope: {
            delightMeterReference: '='
        },
        link: link
    };
})

这是你的控制器

.controller('delightMeterController', function ($scope) {

    $scope.delightScore = 0;
    $scope.delightMeterReference = {};


})

谢谢， Shivas

ng-change事件无效

1 个答案: