应用内浏览器不会加载页面

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

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

常规方法是从controller 内部将变量添加到scope。

所以你的工厂方法会像这样返回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" 的视图中可用，并且您的链接应该可用。