Question

我的视图中有几个按钮，每个按钮都有三种状态：活动，非活动，悬停。这些显示为图像。我有FooController：

foo.controller("FooController", function($scope: IFooScope) {
    // Tell the view about the classes in the app
    this.UnitType = UnitType;
    this.ImageType = ImageType;
    $scope.design = new FooDesign();
});

接口（FooDesign只是一个具有unitType属性的类）：

interface IFooScope extends ng.IScope { 
    design: FooDesign;

    setUnitType(unitType: UnitType);
    getUnitTypeImageUrl(unitType: UnitType);   
}

我希望有一个像这样的html模板的指令：

<div class="unit-type-button">
    <unit-type-image unit-type="UnitType.Millimeters">
    </unit-type-image>
</div>

<div class="unit-type-button">
    <unit-type-image unit-type="UnitType.Inches">
    </unit-type-image>
</div>

在scope.design中有一个unitType属性，单击这些按钮时必须更改。因此，如果scope.design.unitType =毫米，则该按钮具有活动图像（例如，unit_type_millimeters_active.png），而其他按钮具有非活动图像（例如，unit_type_inches_inactive.png），并且两者都具有悬停图像（例如，unit_type_millimeters_hover.png）。

我的指示是这样的：

class UnitTypeImage implements ng.IDirective {
    constructor(private imageService: ImageService) { }

    restrict = "E";
    replace = true;
    template = '<img ng-click=setUnitType(unitType) src="{{getUnitTypeImageUrl(unitType)}}"/>';
    /*scope = {
        unitType: '=';
    };*/

    link = (scope: IFooScope, element, attrs) => {
        scope.setUnitType = function (unitType: UnitType) {
            scope.design.unitType = unitType;
        }

        scope.getUnitTypeImageUrl = function (unitType: UnitType) {
            return (unitType === scope.design.unitType) ? imageService.getUnitTypeImage(unitType, ImageType.Active) : imageService.getUnitTypeImage(unitType, ImageType.Inactive);
        }
    }

    static factory(): ng.IDirectiveFactory {
        var directive = (imageService: ImageService) => new UnitTypeImage(imageService);
        directive.$inject = ['imageService'];
        return directive;
    }
}
foo.directive('unitTypeImage', UnitTypeImage.factory());

如果我在指令中取消注释范围，那么scope.design是未定义的。如果我留下它注释，那么每个函数参数的unitType是未定义的。

另外，我还没有在这里包含悬停图像功能，我不确定如何做到这一点。一个选项是这样的：http://jsfiddle.net/ook3a8Lz/但我在视图中有大约100个不同的按钮（同时不可见，取决于先前的选择）所以这将是一个烂摊子我想在获取时使用枚举器正确的形象。

我有点坚持这一点，所以欢迎每一条帮助。

Answer 1

我放弃了IFooScope并使其成为一项服务，因此没有范围混淆。此外，由于该指令在其范围内具有unitType（带有=），因此函数参数中不需要unitType，因为现在可以通过scope.unitType访问它们（当IFooScope不再存在时）。

Typescirpt

1 个答案: