AngularJS指示文（Typescript）

Question

まず、例を探していますが、私が探している解決法はありません。

私はAngularJSディレクティブを持っていますが、うまくいきますが、実際はTypescriptで本当に必要です。

私の質問はjavascriptコードをtypescriptに翻訳する方法とは関係ありませんが、実際にはtypescriptに変換するとビューが機能しなくなるため、Controllerとのデータバインディングを理解したいと思います。ここで

が私のコードです：

指令

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

あなたはほとんどそこにいます。あなたは 'controllerAs'オプションの問題にぶち当たっています。あなたのディレクティブのコントローラーは、接頭辞 'vm'を使用してテンプレート内で参照する必要があると指定していますが、テンプレートでは使用していません。あなたが言及したように、あなたはコントローラーのエイリアスを使用していることを確認する必要があります：

<!-- 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を含めないと私のせいで、私の謝罪します。