带有 Angular 自定义指令问题的 KineticJS答案

【问题标题】：KineticJS with Angular custom directive issue带有 Angular 自定义指令问题的 KineticJS
【发布时间】：2014-07-15 16:22:41
【问题描述】：

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

错误：[$compile:nonassign] 与指令“draggableCanvas”一起使用的表达式“false”不可赋值！

同样的错误也发生在原始小提琴中，所以我知道问题出在原始代码中。我只是不确定到底是什么问题。似乎 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);

        }
    }
}]);

【问题讨论】：

标签： javascript html angularjs canvas kineticjs

【解决方案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;
});

【讨论】：