[英]winjs angular typescript with splitView
我正在尝试将winjs与angular和typescript一起使用。 Angular-Winjs包装器运行良好,只要我不必为Dom-Elements使用一些其他JavaScript。
在我的情况下,我想使用拆分视图项目:显示菜单,但是JavaScript功能不起作用。
这是我的代码:
<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>
这是github-project端的示例代码。
他们的示例还说,我必须将其添加到我的控制器中:
angular.module("yourAngularApp", ["winjs"]).controller("yourController", function ($scope) {
$scope.splitViewElement = document.getElementById("splitView");
});
现在我的问题是我正在使用打字稿,并使用controllerAs-Syntax创建我的Controller。 当我添加
$scope.splitViewElement = document.getElementById("splitView");
对我的控制器而言,splitView-Element为NULL。
我也尝试使用
angular.element("splitView").context
其中有一个元素,但它也不起作用。
这是我的控制器。
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
}
可能会迟到,但是这对我有用。 在我的控制器中,我正在查询带有angular.element的元素
vm.splitViewElement = angular.element("#splitView")[0];
如果该元素可用,则它应该是数组中的第一个。 现在,只需将vm.splitViewElement绑定到您的视图:
<win-split-view-pane-toggle class="win-splitviewpanetoggle" split-view="vm.splitViewElement">
</win-split-view-pane-toggle>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.