javascript - 数据和指令(结构)

Question

按照您关于大型 Angularjs 应用程序结构的说明，我正在使用此样式指南:

https://github.com/johnpapa/angular-styleguide

我开发了一个 itemManager(项目管理器 Controller )，它有两个嵌套指令(search-options 和 search-results)。

• 项目经理

  • 搜索选项(暂时不重要)

  • 搜索结果

项目管理器模板将显示搜索选项和搜索结果(使用迭代器)。

搜索结果指令 Controller 具有显示项目所需的所有信息。

我的问题是我不知道在哪里存储我将要显示的项目数组的信息。

搜索选项将触发对 REST 服务的 AJAX 调用，该服务将返回包含我要显示的所有搜索结果信息的 JSON。 问题是我不知道应该在哪里存储包含项目信息的数组。

我认为项目管理器上的标记应该是这样的:

<search-result ng-repeat="//iterator"><search-result>

但在项目管理器中我无权访问搜索结果变量(它们在搜索结果指令范围内)。

然后，如果我将变量存储在搜索结果指令中，我应该在指令模板中迭代，我认为这是不对的。 任何人都可以就如何构建它给我建议？

Answer 1

一个巧妙的解决方案是将搜索结果存储在服务中，而不依赖范围之间的原型(prototype)继承。看看这个:

HTML:

<div ng-app="app">

    <div ng-controller="itemController">
        <search-options></search-options>
        <search-result ng-repeat="item in items" item="item"></search-result>
    </div>

</div>

JavaScript:

var app = angular.module('app', []); 

app.service('searchResultsService', function() {
    var myData = ['a', 'b', 'c'];
    return {
        get: function() {
            return myData;
        },
        set: function(data) {myData = data;}
    };
}).controller('itemController', function($scope, searchResultsService) {
    $scope.searchResultsService = searchResultsService;
    $scope.items = [];
    $scope.$watch('searchResultsService.get()', function(newVal) {
        $scope.items = newVal;
    });
}).directive('searchResult', function() {
    return {
        scope: {
            item: '='
        },
        restrict: 'E',
        template: '<p>{{item}}</p>'
    };
}).directive('searchOptions', function(searchResultsService) {
    return {
        scope: {},
        restrict: 'E',
        template: '<button ng-click="search()">Search</button>',
        link: function link(scope, element, attrs) {
            scope.search = function() {
                searchResultsService.set(['d', 'e', 'f']);
            };
        }
    };
});

在这里工作:https://jsfiddle.net/ben1729/x551pmz8/3/