I have developed a custom directive to identify when the enter key is pressed within a text box. Here's the implementation of the directive:
import { BookmarkService } from "../services/bookmarkService";
import { qlik, QlikBookmarkInfo } from "../qlikInit";
class BookmarkListController {
/**
* Dependency injection params
*/
public static $inject: string[] = ["$scope", "bookmarkSvc"];
private $scope: ng.IScope;
private bookmarkSvc: BookmarkService;
private bookmark: QlikBookmarkInfo;
private bookmarkIndex: number;
private showToolbar: boolean = false;
public showAddTextbox: boolean = false;
public newBookmarkTitle: string = "";
private showEditBookmark: boolean = false;
public constructor(scope: ng.IScope, bookmarkSvc: BookmarkService) {
this.$scope = scope;
this.bookmarkSvc = bookmarkSvc;
}
public applyBookmark(bookmarkId: string, bookmarkTitle: string, bookmarkDescription: string): void {
this.bookmark = {Id: "", Title: "", Description: ""};
this.bookmark.Id = bookmarkId;
this.bookmark.Title = bookmarkTitle;
this.bookmark.Description = bookmarkDescription;
this.showToolbar = true;
qlik.applyBookmark("ABC", bookmarkId);
}
public createBookmark(): void {
this.showAddTextbox = true;
}
public removeBookmark(): void {
qlik.removeBookmark("ABC", this.bookmark.Id);
this.bookmarkIndex = this.bookmarkSvc.bookmarksInfo.indexOf(this.bookmark);
this.bookmarkSvc.bookmarksInfo.splice(this.bookmarkIndex, 1);
this.showToolbar = false;
}
public editBookmark(): void {
this.showEditBookmark = true;
// do something
}
/* tslint:disable:no-any */
public saveBookmark(e: any): void {
if (e.keyCode === 13) {
qlik.createBookmark("ABC", this.newBookmarkTitle);
this.showAddTextbox = false;
this.newBookmarkTitle = "";
}
}
/* tslint:enable:no-any */
}
export class BookmarkListComponent implements ng.IComponentOptions {
public templateUrl: string = "bookmarkList.html";
public controller: Function = BookmarkListController;
}
export function bookmarkEnter(): ng.IDirective {
return<ng.IDirective>{
restrict: "A",
scope: {
showAddTextbox: "=?",
newBookmarkTitle: "=?"
},
link: (scope: ng.IScope, element: ng.IAugmentedJQuery, attributes: ng.IAttributes, controller: BookmarkListController): void => {
element.on("keyup", (e: any): void => {
if (e.keyCode === 13) {
qlik.createBookmark("ABC", controller.newBookmarkTitle);
scope.$apply((): void => {
controller.showAddTextbox = false;
controller.newBookmarkTitle = "";
});
}
});
},
controller: BookmarkListController,
controllerAs: "$ctrlblc",
bindToController: true
};
}
Incorporating the directive as below in a bookmarkList.html file:
<div class="dsh-ListTitle">
<h4 class="dsh-ListTitle-title">Bookmarks</h4>
<a class="dsh-List-item" ng-click="$ctrl.createBookmark()">
<ers-icon name="add" ers-tooltip="Add Bookmark"></ers-icon>
</a>
</div>
<div class="u-flex dsh-List dsh-List-icon" ng-show="$ctrl.showToolbar">
<a class="dsh-List-item" ng-click="$ctrl.editBookmark()">
<ers-icon name="edit" ers-tooltip="Edit Bookmark"></ers-icon>
</a>
<a class="dsh-List-item" ng-click="$ctrl.removeBookmark()">
<ers-icon name="delete" ers-tooltip="Delete Bookmark"></ers-icon>
</a>
</div>
<ul class="dsh-List">
<li class="dsh-List-item" ng-repeat="bookmark in $ctrl.bookmarkSvc.bookmarksInfo">
<a ng-click="$ctrl.applyBookmark(bookmark.Id, bookmark.Title, bookmark.Description)">{{bookmark.Title}}</a>
</li>
<li class="dsh-List-item" ng-show="$ctrl.showAddTextbox">
<input type="text" bookmark-enter showAddTextbox="$ctrl.showAddTextbox" newBookmarkTitle="$ctrl.newBookmarkTitle" ng-show="$ctrl.showAddTextbox"/>
</li>
</ul>
I believe I've correctly connected everything. However, when executing qlik.createBookmark(), the controller.newBookmarkTitle doesn't capture the text entered in the text box. It shows up as an empty string. Meanwhile, evaluating element.val() does contain the typed text.
What could I be overlooking here? The project employs AngularJS version 1.5.