Angular中的KendoUI ActionSheet从NavBar按钮调用 - 无效的OwnerDocument

时间:2016-04-04 02:37:37

标签: angularjs kendo-ui

以下HTML导致错误:无法获取属性' top'当您将浏览器设置为模拟平板电脑(如IPad)时,未定义或空引用。

Codepen在这里

http://codepen.io/jcbowyer/pen/wGrLmE

Angular Error

<html>

<head>
  <meta charset="utf-8">
  <title>Kendo UI Mobile Loves AngularJS</title>

  <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1029/styles/kendo.mobile.all.min.css">
  <!-- the application CSS file -->
  <link rel="http://demos.telerik.com/kendo-ui/content/mobile/apps/sushi/css/style.css">

  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js"></script>
  <script src="http://cdn.kendostatic.com/2014.3.1029/js/kendo.all.min.js"></script>
</head>

<body kendo-mobile-application ng-app="sushiMobileApp">

  <kendo-mobile-view id="index">
    <kendo-mobile-header>
      <kendo-mobile-nav-bar>
        Home View
        <button kendo-mobile-button k-align="'right'" data-icon="'contacts'" id="btnProfile" k-on-click="mnuProfile.open($('#btnProfile'))"></button>
      </kendo-mobile-nav-bar>
    </kendo-mobile-header>
    <ul kendo-mobile-action-sheet="mnuProfile" k-on-command="onCommand(kendoEvent)" k-type="'auto'">
      <li><a href="#" data-command="login">Login</a></li>
      <li ng-hide="(authentication.token.length == 0)"><a href="#" data-command="logout">Logout</a></li>
      <li><a href="#" data-command="showProfile">My Profile</a></li>
    </ul>
  </kendo-mobile-view>

  <script>
    angular.module('sushiMobileApp', [ 'kendo.directives' ]);
  </script>

</body>

</html>

1 个答案:

答案 0 :(得分:0)

我想出了如何使用k-rel insteal打开这项工作。

更新后的代码

Codepen在这里

http://codepen.io/jcbowyer/pen/KzyQwa

&#13;
&#13;
<html>
 
<head>
  <meta charset="utf-8">
  <title>Kendo UI Mobile Loves AngularJS</title>
 
  <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1029/styles/kendo.mobile.all.min.css">
  <!-- the application CSS file -->
  <link rel="http://demos.telerik.com/kendo-ui/content/mobile/apps/sushi/css/style.css">
 
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js"></script>
  <script src="http://cdn.kendostatic.com/2014.3.1029/js/kendo.all.min.js"></script>
</head>
 
<body kendo-mobile-application ng-app="sushiMobileApp">
 
  <kendo-mobile-view id="index">
    <kendo-mobile-header>
      <kendo-mobile-nav-bar>
        Home View
        <a kendo-mobile-button k-align="'right'" data-icon="'contacts'" id="btnProfile"
                k-rel="'actionsheet'"
                href="#mnuProfile"></a>
      </kendo-mobile-nav-bar>
    </kendo-mobile-header>
    <ul kendo-mobile-action-sheet="mnuProfile" id="mnuProfile" k-on-command="onCommand(kendoEvent)" k-type="'auto'">
      <li><a href="#" data-command="login">Login</a></li>
      <li ng-hide="(authentication.token.length == 0)"><a href="#" data-command="logout">Logout</a></li>
      <li><a href="#" data-command="showProfile">My Profile</a></li>
    </ul>
  </kendo-mobile-view>
 
  <script>
    angular.module('sushiMobileApp', [ 'kendo.directives' ]);
  </script>
 
</body>
 
</html>
&#13;
&#13;
&#13;