AngularJS directive as Typescript way

Question

First of all, I have looked for examples and none of them offer the solution I'm looking for.

I have an AngularJS directive and it works fine, but actually I really want it with Typescript.

My question is not related to the way to translate the javascript code to typescript, but I really want to understand data binding with Controller, because when translated into typescript the view has stopped working.

Here is my code:

Directive

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);
}

View

<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>

what is exactly not working? do you get any error? Haven't you forgot to call vm.toolbarButtons instead of only toolbarButtons? — iberbeu
– iberbeu, Commented May 10, 2016 at 11:12

Andy Hopper · Accepted Answer · 2016-05-10 13:28:00Z

2

You're almost there; you're just running into an issue with the 'controllerAs' option. You're specifying that the controller for your directive should be referenced in the template using the prefix 'vm', but your template isn't using that. As @iberbeu mentioned, you should make sure that you're using the controller alias:

<!-- 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>

answered May 10, 2016 at 13:28

Andy Hopper

3,7081 gold badge22 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Abel Over a year ago

Actually, I had forgotten to use the alias in the view, but this is not the (only) problem. View is still not render anything. Any idea?

Abel · Accepted Answer · 2016-05-10 14:43:14Z

0

Finally, I find the solution. The problem was the use of Doctype in the view. I remove it and now it works fine!

My fault for not including the doctype in example, my apologies.

answered May 10, 2016 at 14:43

Abel

3559 silver badges20 bronze badges

Collectives™ on Stack Overflow

AngularJS directive as Typescript way

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related