Как просмотреть данные JSON из произвольной ссылки в моем приложении?

Question

Я могу просматривать содержимое из определенных данных массива json из произвольной ссылки в приложении?

Как показывает мой демонстрационный плункер, мой поиск работает отлично (поиск по термину «контент») и возвращает то, что я хотел; но я также хочу иметь возможность вспомнить некоторые из этих возвращенных данных из определенных ссылок в другом месте приложения.

Сценарий плунжера: Нажав на ссылку «Просмотр информации для контента 3» в моем плункере, вы должны показать информацию в контентном наборе 3 ниже, но я не могу понять, как заставить ее работать.

Plunker Демо: http://plnkr.co/edit/Z8A8nJ6uQfdTwR2TGRtY?p=preview

Я также интересно, как я мог сохранить содержание видимым при обновлении страницы?

HTML

<!-- Search --> 
<div class="well"> 
    <p>Search the term "content"</p> 
    <form role="form"> 
    <div my-search ng-model="selectedContent" class="form-group clearfix search"> 
     <input type="text" ng-model="selectedContent" ng-options="query as query.searchQuery for query in searchData" bs-typeahead="bs-typeahead" class="form-control search-field"/> 
     <button type="button" class="btn btn-primary search-btn" ng-click="updateModel()"><span class="glyphicon glyphicon-search"></span></button> 
    </div> 
    </form> 
</div> 

<!-- this link should also return the specified data --> 
<a href="">View info for content set 3:</a> 

<!-- Dynamic Content --> 
<div class="well"> 
    <h4>{{clickedContent.contentTitle}}</h4> 
    <ul> 
    <li ng-repeat="item in clickedContent.headlines" ng-bind-html="toTrusted(item.headline)"></li> 
    </ul> 
</div> 

AngularStrap машинописный частичный шаблон

<ul class="typeahead dropdown-menu" tabindex="-1" ng-show="$isVisible()" role="select"> 
     <li role="presentation" ng-repeat="match in $matches" ng-class="{active: $index == $activeIndex}"> 
      <a href="" role="menuitem" tabindex="-1" ng-click="updateModel(); $select($index, $event)"> 
       <div class="query" ng-bind="match.label" data-title="{{match.value.popoverTitle}}", data-content="{{match.value.popoverContent}}", data-placement="right", data-trigger="hover", bs-popover></div> 
      </a> 
     </li> 
    </ul> 

JS

var app = angular.module('demoApp', ['ngAnimate', 'ngSanitize', 'mgcrea.ngStrap']) 
    .config(function ($typeaheadProvider) { 
     angular.extend($typeaheadProvider.defaults, { 
     template: 'ngstrapTypeahead.html', 
     container: 'body' 
     }); 
    }); 

    app.directive('mySearch', function(){ 
     return { 
     restrict: 'A', 
     require: 'ngModel', 
     link: function($scope, $element, $attrs, ngModel){ 
      ngModel.$render = function(){ 
      if (angular.isObject($scope.selectedContent)) { 
       $scope.clickedContent = $scope.selectedContent; 
      } 
      } 
      $scope.updateModel = function() { 
      $scope.clickedContent = $scope.selectedContent; 
      } 
     } 
     } 
    }); 

    function MainController($scope, $sce, $templateCache, $http) { 

     $scope.selectedContent = ''; 

     $http.get('searchData.json').then(function(response){ 
     $scope.searchData = response.data; 
     return $scope.searchData; 
     }); 

     $scope.toTrusted = function(headlineHtml) { 
     return $sce.trustAsHtml(headlineHtml) 
     }; 

    }; 

JSON

 [ 
     { 
      "contentId": 1, 
      "searchQuery": "Content set 1 dummy query vestibulum abcdefghijklmnop", 
      "contentTitle": "Pretaining to content set 1", 
      "popoverTitle": "Query info", 
      "popoverContent": "Interesting info about query", 
      "headlines": [ 
       { 
        "headline": "<a href='#'>1st headline in content set 1</a>" 
       }, 
       { 
        "headline": "<a href='#'>2nd headline in content set 1</a>" 
       }, 
       { 
        "headline": "<a href='#'>3rd headline in content set 1</a>" 
       } 
      ] 

     }, 
     { 
      "contentId": 2, 
      "searchQuery": "Content set 2 dummy query vestibulum abcdefghijklmnop", 
      "contentTitle": "Pretaining to content set 2", 
      "popoverTitle": "Query info", 
      "popoverContent": "Interesting info about query", 
      "headlines": [ 
       { 
        "headline": "<a href='#'>1st headline in content set 2</a>" 
       }, 
       { 
        "headline": "<a href='#'>2nd headline in content set 2<a/>" 
       }, 
       { 
        "headline": "<a href='#'>3rd headline in content set 2</a>" 
       } 
      ] 
     }, 
     { 
      "contentId": 3, 
      "searchQuery": "Content set 3 dummy query vestibulum abcdefghijklmnop", 
      "contentTitle": "Pretaining to content set 3", 
      "popoverTitle": "Query info", 
      "popoverContent": "Interesting info about query", 
      "headlines": [ 
       { 
        "headline": "<a href='#'>1st headline in content set 3</a>" 
       }, 
       { 
        "headline": "<a href='#'>2nd headline in content set 3</a>" 
       }, 
       { 
        "headline": "<a href='#'>3rd headline in content set 3</a>" 
       } 
      ] 
     }, 
      { 
      "contentId": 4, 
      "searchQuery": "Content set 4 dummy query vestibulum abcdefghijklmnop", 
      "contentTitle": "Pretaining to content set 4", 
      "popoverTitle": "Query info", 
      "popoverContent": "Interesting info about query", 
      "headlines": [ 
       { 
        "headline": "<a href='#'>1st headline in content set 4</a>" 
       }, 
       { 
        "headline": "<a href='#'>2nd headline in content set 4</a>" 
       }, 
       { 
        "headline": "<a href='#'>3rd headline in content set 4</a>" 
       } 
      ] 
     } 
    ] 

Answer 1

Move получение searchData.json из контроллера и в сервис. Эта служба может кэшировать данные, так что каждая информация необходима, она не нуждается в повторном запросе. Затем эту услугу можно вводить в любой контроллер или директиву, которая нуждается в данных.