Question

我可以从应用程序中的任意链接查看特定json数组数据中的内容吗？

正如我的演示插件所示，我的搜索工作正常（搜索术语＆＃34;内容＆＃34;）并返回我喜欢的内容;但我也希望能够从应用程序的其他地方的某些链接中回忆一些返回的数据。

Plunker场景：单击＆＃34;查看内容集3＆＃34;的信息;我的plunker中的链接应该在其下方的内容集3中显示信息，但我无法弄清楚如何使其工作。

Plunker Demo：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 Typeahead部分模板

   <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

将searchData.json从您的控制器转移到服务中。此服务可以缓存数据，因此需要每个数据，它不需要再次请求它。然后，可以将此服务注入任何需要数据的控制器或指令中。

如何从我的应用程序中的任意链接查看JSON数据？

1 个答案: