Question

我在母亲的手机（三星Galaxy JS 3）上测试我的portfolio website时遇到了问题。项目的图像和标题从带有ng-repeat的JSON加载到索引页面上，信息的链接由带有ui-sref的项目ID生成。该网站可以加载到移动设备上，它可以直接转到about页面，也可以使用ui-sref，但它不能直接指向子页面 - 它可以保留在主页面上，或者如果我强制它转到一个页面上在页面中，它显示一个带有切换菜单的空白页面（ng-include标题）。

它适用于索尼Xperia M4，三星Galaxy Young，Galaxy A5，台式电脑（Windows 8.1）和Mac（不确定操作系统）。我跟着“Hello Solarsystem” tutorial，当我今天早上（6月7日）在她的手机上试用Plunker版本时，似乎也有同样的问题。我已经确保该网站在阅读ui-sref not working in nested views后使用的是最新版本，我尝试将ui-view添加到显示项目链接的模板中，如此处所示：Ui-sref not generating clickable links/not working和我现在感到困惑。

很抱歉，如果我的问题有点长，但我以前从来没有写过，我也不想错过任何内容。

编辑：我现在已经使用了我正在使用的项目的确切代码 - Plunker，我已经删除了ui-router，因此它不会将内页加载为子页面，但至少在所有浏览器中都可以看到 - plunk正在使用ui-router。

我正在考虑的代码问题如下所示。

projects.html - 查看

public A1ArrayList(){ 
    E=new E[5];
}

的index.html

<div class="container">
    <div class="wrapper">
        <div class="col-xs-12 col-sm-6 col-md-4 project-block" ng-repeat="project in $ctrl.projects">
            <a ui-sref="project({ projectId: project.id })" ui-sref-active="active">
                <div class="grid-item university">
                    <div class="grid-caption">
                        <img ng-src="{{project.thumb}}" alt="{{project.name}} ({{project.desc}})" id="portfolio-thumb-{{project.id}}" />
                        <div class="titles">
                            <div class="grid-projects title">{{project.name}}</div>
                            <div class="grid-projects desc">{{project.desc}}</div>
                        </div>
                    </div>
                </div>
            </a>
        </div>
    </div>
</div>
<ui-view></ui-view>

app.js

<body ng-app="myPortfolio">
    <div id="wrapper">
        <header ng-include="'header.html'"></header>
        <div id="page-content-wrapper">
            <a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Toggle Menu</a>
            <ui-view></ui-view>
            <uir-state-vis class="statevis" width="300" height="100"></uir-state-vis>
        </div>
        <!-- Bootstrap core JavaScript
        ================================================== -->
        <!-- Placed at the end of the document so the pages load faster -->
    </div>
</body>

projects.js - component

var myApp = angular.module('myPortfolio', ['ui.router', 'slick', 'ngAnimate', 'ngRoute', 'ngResource', 'ngTouch', 'ngSanitize', 'ui.bootstrap']);

myApp.config(function ($stateProvider) {
  // An array of state definitions
  var states = [
    {
      name: 'about',
      url: '/about',
      component: 'about'
    },

    {
      name: 'projects',
      url: '/projects',
      component: 'projects',
      // It delegates to the ProjectService to HTTP fetch (async)
      // The project component receives this via its `bindings: `
      resolve: {
        projects: function (ProjectService) {
          return ProjectService.getAllProjects();
        }
      }
    },

    {
      name: 'project',
      // This state takes a URL parameter called projectId
      url: '/project/{projectId}',
      component: 'project',
      // This state defines a 'project' resolve
      // It delegates to the ProjectService, passing the projectId parameter
      resolve: {
        project: function (ProjectService, $transition$) {
          return ProjectService.getProject($transition$.params().projectId);
        }
      }
    }
  ]

  // Loop over the state definitions and register them
  states.forEach(function (state) {
    $stateProvider.state(state);
  });
});

myApp.config(function ($urlRouterProvider) {
  // when there is an empty route, redirect to /index   
  $urlRouterProvider.when('', '/projects');

});

// preload the async data
myApp.run(function ($http) {
  $http.get('data/projects.json', { cache: true });
  $http.get('data/info.json', { cache: true });
});

//Make html in JSON file trusted
myApp.filter('to_trusted', ['$sce', function ($sce) {
  return function (text) {
    return $sce.trustAsHtml(text);
  };
}]);

projects.js - service

angular.module('myPortfolio').service('ProjectService', function($http) {
  var service = {
    getAllProjects: function() {
      return $http.get('data/projects.json', { cache: true }).then(function(resp) {
        return resp.data;
      });
    },

    getProject: function(id) {
      function projectMatchesParam(project) {
        return project.id === id;
      }

      return service.getAllProjects().then(function (projects) {
        return projects.find(projectMatchesParam)
      });
    }
  }

  return service;
})

AngularJS ui-sref没有在Andriod手机上工作

0 个答案: