Question

关于你的大型Angularjs app结构，我正在使用这个样式指南：

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

我开发了一个 itemManager （项目管理器控制器），它有两个嵌套指令（搜索选项和搜索结果）。< / p>

项目经理
- 搜索选项（暂时不重要）
- 搜索结果

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

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

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

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

我认为项目经理的标记应该是这样的：

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

但是在项目管理器中我无法访问搜索结果变量（它们在搜索结果指令范围内）。

然后，如果我将变量存储在search-result指令中，我应该在指令模板内迭代，我认为这是不对的。任何人都可以就如何构建这个问题给我建议吗？

Answer 1

一个简洁的解决方案是将搜索结果存储在服务中，而不是依赖于范围之间的原型继承。看看这个：

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/

Answer 2

您可以安全地将数据存储在 itemManager 控制器中，其中的指令仍然可以访问它，因为指令的范围已扩展到其父控制器

数据和指令（结构）

2 个答案: