javascript - 应用内浏览器无法加载页面

Question

我最近尝试在我的应用程序上创建应用程序内浏览器功能。该函数可以工作，但不会加载页面。我在 JavaScript 中创建了一个包含 url 的数组，然后创建了一个 ng-repeat 来填充列表。列表中的每个内容都需要将用户带到不同的页面。有人可以告诉我哪里出了问题吗？

我的阵列:

.factory('UsefulData', function($http){

  var useful = [
    {
      "id": 1,
      "name": "Services",
      "img": "img/useful/services.png",
      "url": "http://www.amazon.co.uk/",
    },
    {
      "id": 2,
      "name": "Plan",
      "img": "img/useful/communications.png",
      "url": "http://www.bbc.com/sport/0/",
    }
  ];

  return {
    all: function() {
      return useful;
    },
    get: function(usefulId) {
      // Simple index lookup
      return useful[usefulId];
    }
  }

我的列表:

<ion-list>
  <ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="data in useful" type="item-text-wrap" onclick="window.open('{{data.url}}', '_blank', 'location=yes')">
    <img class="imgSize" ng-src="{{data.img}}">
      {{data.name}}
    <i class="icon ion-chevron-right icon-accessory"></i>
  </ion-item>
</ion-list>

我的 Controller :

angular.module('Mobilisation').controller('UsefulCtrl', function($scope, $state, $http, $rootScope, UsefulData) {

  $scope.useful = UsefulData.all();

})

Answer 1

仅在工厂内创建变量并不会使变量在某个 View 中可用。

常规方法是将变量添加到 scope从里面 controller .

所以你的工厂方法会返回useful的内容，如下所示:

.factory('UsefulData', function($http){
  var factory = {};

  factory.useful = [
    {
      "id": 1,
      "name": "Services",
      "img": "img/useful/services.png",
      "url": "http://www.amazon.co.uk/",
    },
    {
      "id": 2,
      "name": "Plan",
      "img": "img/useful/communications.png",
      "url": "http://www.bbc.com/sport/0/",
    }
  ];

  return factory;
}

你的 Controller 看起来像这样:

.controller('UsefulController', function($scope, UsefulData) {
    $scope.useful = UsefulData.useful;
});

现在您需要做的就是确保 Controller 的范围在 ng-controller="UsefulController" View 中可用，并且您的链接应该可用。