AngularJS指令作为类型脚本方式

首先，我寻找了一些例子，但没有一个能提供我想要的解决方案

我有一个AngularJS指令，它工作得很好，但实际上我真的希望它与Typescript一起使用

我的问题与将javascript代码转换为typescript的方式无关，但我真的想了解控制器的数据绑定，因为当转换为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>

---

你就快到了；您刚刚遇到了“controllerAs”选项的问题。您正在指定应在模板中使用前缀“vm”引用指令的控制器，但您的模板未使用该前缀。正如@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>

---

你就快到了；您刚刚遇到了“controllerAs”选项的问题。您正在指定应在模板中使用前缀“vm”引用指令的控制器，但您的模板未使用该前缀。正如@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>

---

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

---

我没有在示例中包含doctype，这是我的过错，我深表歉意。

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

---

我的错误是没有将doctype包含在示例中，我很抱歉。

到底是什么不起作用？你有什么错误吗？难道你没有忘记调用

vm.toolbarButtons

，而不是只调用

toolbarButtons

？到底什么不起作用？你有什么错误吗？难道你没有忘记调用

vm.toolbarButtons

而不是只调用

toolbarButtons

？实际上，我忘了在视图中使用别名，但这不是唯一的问题。视图仍然没有渲染任何内容。有什么想法吗？实际上，我忘了在视图中使用别名，但这不是（唯一）问题。视图仍然没有渲染任何内容。有什么想法吗？