Question

好的，我想尽快在Angular中整理一个KineticJS应用程序。一直在与一个简单的问题搏斗。这里有一个在AngularJS中设置KineticJS可拖动形状的示例：http://blogs.microsoft.co.il/choroshin/2014/01/07/angularjs-html5-canvas-drag-and-drop-directive-using-kineticjs/。在这个我完全复制到我自己的服务器的示例代码中，出现以下错误：

错误：[$ compile：nonassign]表达式＆＃39; false＆＃39;用于指令＆＃39; draggableCanvas＆＃39;是不可转让的！

同样的错误也发生在原始小提琴中，所以我知道问题出在原始代码中。我完全不确定问题是什么。似乎HTML元素不正确，它可能是一件容易解决的问题。我只是没有看到它。思考？这是指向小提琴的链接：http://jsfiddle.net/choroshin/a68F5/light/

以下是HTML代码：

 <div ng-app="myApp">
  <div>
    canvas
    <div data-draggable-canvas data-isdraggable="true" id="canvas">&nbsp;</div>
  </div>
</div>

这是我设置为加载头部的JavaScript，并且示例小提琴已经在正文中。无论哪种方式，它仍然会出现同样问题的错误，所以我确定那里没有重要性：

app.directive('draggableCanvas', ['$rootScope', function ($rootScope) {
    return {
        restrict: 'A',
        scope: {
            isdraggable: '=',
            kineticObj: '='
        },
        link: function (scope, el, attrs) {
        console.log("in");
            if (!scope.kineticStageObj) {
                var id = attrs["id"];
                //create random unique id
                if (!id) {
                    id = Math.random().toString(36).substring(7);
                }
                if (!scope.kineticStageObj) {
                    scope.kineticStageObj = new Kinetic.Stage({
                        container: id,
                        width: 578,
                        height: 200
                    });
                }
                if (!scope.kineticStageObj.container) {
                    scope.kineticStageObj.attrs.container = id;
                }
            }
            var layer = new Kinetic.Layer();
            var rectX = scope.kineticStageObj.getWidth() / 2 - 50;
            var rectY = scope.kineticStageObj.getHeight() / 2 - 25;

            //if kineticObj is null, init
            var options = {
                x: rectX,
                y: rectY,
                width: 100,
                height: 50,
                fill: '#00D2FF',
                stroke: 'black',
                strokeWidth: 4,
            };
            if (scope.isdraggable) {
                options.draggable = true;
            }
            if (!scope.kineticObj) {
                scope.kineticObj = new Kinetic.Rect(options);
            }

            // add cursor styling
            scope.kineticObj.on('mouseover', function () {

                document.body.style.cursor = 'pointer';

            });
            scope.kineticObj.on('mouseout', function () {
                document.body.style.cursor = 'default';
                $rootScope.$emit("CANVAS-MOUSEOUT");
            });

            layer.add(scope.kineticObj);
            scope.kineticStageObj.add(layer);

        }
    }
}]);

Answer 1

问题是您要为指令中的属性分配值。

这已在对此问题here的已接受答案中进行了解释。

解决此问题的方法是通过将每个属性赋值给$ scope来将其更改为变量。这是你的工作jsfiddle。

请注意以下更改：

<div data-draggable-canvas kineticobj=canvasKineticObj kineticstageobj=canvasKineticStageObj isdraggable=isDraggable id="canvas">&nbsp;</div>

为每个属性分配了一个特定的范围，这些范围在名为canvasCtrl的控制器中定义。

app.controller('canvasCtrl', function($scope){
    $scope.canvasKineticObj = false;
    $scope.canvaskineticStageObj = false;
    $scope.isDraggable = true;
});

KineticJS与Angular自定义指令问题

1 个答案: