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

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>

我的控制器：

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

  $scope.useful = UsefulData.all();

})

Answer 1

仅在工厂内部创建变量并不能使变量在其中一个视图中可用。

常规方法是从控制器内部将变量添加到作用域 。

因此，您的工厂方法将返回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('UsefulController', function($scope, UsefulData) {
    $scope.useful = UsefulData.useful;
});

现在，您需要做的就是确保使用ng-controller="UsefulController"在视图中可以使用ng-controller="UsefulController" ，并且您的链接应该可用。