Question

我正在为我正在进行的项目中创建一个Jcrop指令。出于某种原因，我在Jcrop的OnSelect中指定的功能并未触发。我想知道它是否是因为我已经在我的指令中的链接功能中定义了它，或者它是否是另一个范围问题......但我不确定

我为Jcrop定义了以下指令：

module MyProject.Directives {

    export interface IEfJcropScope extends ng.IScope {
        image: MyProject.Image;
        aspectRatioGroups: _.Dictionary<MyClass[]>;
        selectCrop(group: MyClass[]);
        storeCoords(coords);
    }

    export class EfJcrop implements ng.IDirective {
        restrict = "E";
        templateUrl = 'ef-jcrop.html';
        replace = true;
        transclude = true;
        scope = {
            image: "="
        }
        link = (scope: IEfJcropScope, elem, attrs) => {
            window.setTimeout(() => {
                this.imageElement = $('#img-' + scope.image.ImageID)
                this.imageElement.Jcrop({
                    onChange: scope.storeCoords, //this is not firing
                    onSelect: scope.storeCoords, //this is not firing
                    allowResize: false,
                    allowSelect: false,
                }, () => {

                    });
            });
            //passing in an entire group, represents all active products for one particular aspect ratio
            scope.selectCrop = (group: MyClass[]) => { 
                var jcropObj = this.imageElement.data('Jcrop');
                jcropObj.setOptions({
                    aspectRatio: 1.5 //for example
                });
                scope.storeCoords = (coords) => {
                    //store coords.x, coords.y, code is here
                }
            }
        };
        controller = ($scope: IEfJcropScope) => {
        }
    }
}

这是模板：

<div class="ef-jcrop">
    <div ng-controller="imagectrl">
        <img id="img-{{image.id}}"
             src="placeholder"
             ng-attr-alt="{{image.name}}"
             ng-src="{{image.url}}" />

        <table id='productRatioTable'>
            <tr class="ratio-selection">
                <td class="ratio-item" ng-repeat="group in aspectRatioGroups">
                    <img id="ratio{{$index}}" ng-src="{{image.url}}" class='ratioSelector' ng-click="selectCrop(group)" ng-class="{ 'selected' : group.selected }" />
                    <div ng-repeat="ipd in group">{{ipd.ProductDimension.Name}}</div>
                </td>
            </tr>
        </table>
    </div>
</div>

在scope.storeCoords中使用断点，永远不会达到该功能。我在浏览器中没有错误。为什么不打电话呢？

Answer 1

这是一个由疲惫的大脑引起的问题。 storeCoords位于selectCrop函数内。它不应该。糟糕。

Jcrop OnSelect指令未触发

1 个答案: