angularjs – 带Angular的Phonegap – 指示不显示和奇怪的视图显

发布时间：2020-12-17 17:48:05 所属栏目：安全来源：网络整理

导读：我正在尝试使用Angular.js构建一个Phonegap应用程序我试图这样做：当用户登录时,将向用户显示标题. 我在directive.js中有指令： angular.module('myApp').directive('ngHeaderline',['Auth',function(Auth) { return { templateUrl: '/views/partials/heade

我正在尝试使用Angular.js构建一个Phonegap应用程序

我试图这样做：当用户登录时,将向用户显示标题.

我在directive.js中有指令：

angular.module('myApp')
.directive('ngHeaderline',['Auth',function(Auth) {
  return {
    templateUrl: '/views/partials/header.html',replace: true,scope: true,link: function($scope) {
      $scope.isAuthenticated = Auth.isLoggedIn;
      $scope.logout = Auth.logout();
    }
  }
}]);

让我们假设所有元素都存在.验证工厂和模板(当我在Chrome浏览器上测试时一切正常显示)

然后在我的index.html中我有：

<body>


<div ng-headerline></div>

    <div class="main-content">
        <div ng-errorline></div>
        <div ng-loadingline></div>
        <div ng-view=""></div>
    </div>

  <!-- Foundation JS dependencies -->

  <script src="bower_components/foundation/js/vendor/custom.modernizr.js"></script>
  <script src="bower_components/foundation/js/foundation/foundation.js"></script>


    <script src="scripts/vendor/cordova.js"></script>

    <script src="bower_components/jquery/jquery.js"></script>
    <script src="bower_components/jquery.formatDateTime/jquery.formatDateTime.js"></script>
    <script src="bower_components/jquery-ui/ui/jquery-ui.js"></script>

    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-resource/angular-resource.js"></script>
    <script src="bower_components/angular-cookies/angular-cookies.js"></script>
    <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
    <script src="bower_components/angular-route/angular-route.js"></script>

    <script src="bower_components/foundation/js/foundation/foundation.js"></script>
    <script src="bower_components/foundation/js/foundation/foundation.topbar.js"></script>

    <script src="scripts/controllers/main.js"></script>




    <script src="js/app.js"></script>
    <script src="js/services.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/filters.js"></script>
    <script src="js/directives.js"></script>

</body>

我的header.html部分看起来像这样：

<div class="app">

<div ng-show="isAuthenticated()">
My Header
</div>

</div>

重复一遍,当我在浏览器上显示时,一切都正确显示,但是当我使用Phonegap编译并部署到Android设备时,标题没有显示.

可能是什么问题呢？

解决方法

我实际上遇到了同样的问题.你的问题在这里：

templateUrl: '/views/partials/header.html',

您需要删除该初始斜杠并使用相对路径.在我的情况下,我有’/scripts/directives/templates/bottom-menu.html’,我的模板不起作用.我删除了第一个斜线,它完美地工作.

原因是,当它部署到android时,这些文件不再位于根目录中,因此第一个斜杠会破坏路径.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!