Question

首先，我找了一些例子，但没有一个提供我正在寻找的解决方案。

我有一个AngularJS指令，它工作正常，但实际上我真的想要它与Typescript。

我的问题与将javascript代码翻译成typescript的方式无关，但我真的想了解与Controller的数据绑定，因为当翻译成typescript时，视图已停止工作。

这是我的代码：

指令

namespace Directives {

"use strict";

export interface ISidebarController {
    toolbarButtons: any[];
    toolbarBck: string;
    toolbarBtnAction: Function;
}

class SidebarController implements ISidebarController {
    static $inject = ["$location"];
    constructor(private $location: ng.ILocationService) {
    }
    public toolbarBck = "sidebar-disabled";
    public toolbarButtons = [
        {
            enabledImgIcon: "../resources/img/sidebar/enabled/list_icon.png",
            disabledImgIcon: "../resources/img/sidebar/disabled/list_icon.png",
            enabledBck: "sidebar-enabled",
            disabledBck: "sidebar-disabled",
            isEnabled: true,
            isPressed: false
        }, {
            enabledImgIcon: "../resources/img/sidebar/enabled/create.png",
            disabledImgIcon: "../resources/img/sidebar/disabled/create.png",
            enabledBck: "sidebar-enabled",
            disabledBck: "sidebar-disabled",
            isEnabled: true,
            isPressed: false
        }
    ];
    public toolbarBtnAction = function(btnObj, index) {
        btnObj.isPressed = !btnObj.isPressed;            
    };
}
function sidebar(): ng.IDirective {
    return {
        restrict: "E",
        templateUrl: "widgets/sidebar.html",
        replace: true,
        scope: {},
        controller: SidebarController,
        controllerAs: "vm",
        bindToController: true
    };
}
angular.module("app.confVersion").directive("sidebar", sidebar);
}

查看

<div class="row" ng-repeat="toolBtn in toolbarButtons" ng-click="toolbarBtnAction(toolBtn, $index)">
    <div class="{{toolBtn.isPressed ? toolBtn.enabledBck : toolBtn.disabledBck}}">
        <img ng-src="{{toolBtn.isPressed ? toolBtn.enabledImgIcon : toolBtn.disabledImgIcon}}">
    </div>
</div>

Answer 1

你几乎就在那里;你刚刚遇到“控制器”的问题＆＃39;选项。您已指定使用前缀＆＃39; vm＆＃39;在模板中引用指令的控制器，但您的模板并未使用该控制器。正如@iberbeu所提到的，你应该确保你使用控制器别名：

<!-- Note the use of 'vm.toolbarButtons' below! -->
<div class="row" ng-repeat="toolBtn in vm.toolbarButtons" ng-click="toolbarBtnAction(toolBtn, $index)">
    <div class="{{toolBtn.isPressed ? toolBtn.enabledBck : toolBtn.disabledBck}}">
        <img ng-src="{{toolBtn.isPressed ? toolBtn.enabledImgIcon : toolBtn.disabledImgIcon}}">
     </div>
</div>

Answer 2

最后，我找到了解决方案。问题是在视图中使用Doctype。我删除它，现在它工作正常！

我的错误是不包括示例中的doctype，我道歉。

AngularJS指令作为Typescript方式

2 个答案: