Question

我正在尝试使用带角度和打字稿的winjs。 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-side的示例代码。

他们的例子也说我必须将它添加到我的控制器：

angular.module("yourAngularApp", ["winjs"]).controller("yourController", function ($scope) {
    $scope.splitViewElement = document.getElementById("splitView");
});

现在我的问题是我正在使用typescript并使用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

        }

Answer 1

可能会迟到但这是我的工作方式。在我的控制器中，我使用angular.element

查询元素

<div class="clearfix hidden-sm-up"></div> <div class="clearfix hidden-md-up hidden-xs-down"></div> <div class="clearfix hidden-md-down"></div>

如果元素可用，它应该是数组中的第一个元素。现在只需将vm.splitViewElement绑定到您的视图：

vm.splitViewElement = angular.element("#splitView")[0];

带有splitView的winjs angular typescript

1 个答案: