Директива AngularJS как способ ввода-вывода

Question

Прежде всего, я искал примеры, и ни одно из них не предлагает решение, которое я ищу.

У меня есть директива AngularJS, и она отлично работает, но на самом деле я действительно хочу ее с помощью Typcript.

Мой вопрос не связан с тем, как перевести код javascript на машинопись, но я действительно хочу понять привязку данных к контроллеру, потому что при переводе на машинописный вид представление перестало работать.

Вот мой код:

Директива

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', но ваш шаблон не использует это. Как упоминалось в @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 в пример, мои извинения.