Currently, I am attempting to integrate winjs with Angular and TypeScript. The Angular-Winjs wrapper functions well, except when additional JavaScript is required for the Dom-Elements.
In my scenario, I am trying to implement the split-view item. Although the menu appears, the JavaScript functionality does not work as expected.
Below is a snippet of the code I am using:
<win-split-view-pane-toggle split-view="splitViewElement"></win-split-view-pane-toggle>
<win-split-view id="splitView">
<win-split-view-pane>
SplitView Navigation Pane
<win-split-view-command label="'Home'" icon="'home'" on-invoked="goToHome()"></win-split-view-command>
<win-split-view-command label="'Settings'" icon="'settings'" on-invoked="goToSettings()"></win-split-view-command>
</win-split-view-pane>
<win-split-view-content>SplitView Content Area</win-split-view-content>
</win-split-view>
This code is sourced from a github project.
Their example mentions that I need to include the following in my Controller:
angular.module("yourAngularApp", ["winjs"]).controller("yourController", function ($scope) {
$scope.splitViewElement = document.getElementById("splitView");
});
My issue stems from the fact that I am using TypeScript and constructing my Controller utilizing the controllerAs syntax. When I try to add:
$scope.splitViewElement = document.getElementById("splitView");
To my controller, the splitView element returns NULL.
I also attempted:
angular.element("splitView").context
Although this provides an element, it still does not function correctly.
Here is an excerpt from my Controller:
constructor($scope, $state, $http, $q) {
super($state, $http, $q, $scope, true);
$scope.splitViewElement = document.getElementById("splitView"); //this is null
$scope.splitViewElement = angular.element("splitView").context; //this is not null
}