Question

我有一个角度应用程序，其ng-view（就像任何好的MVC一样）操纵模型的显示方式。数据（模型）来自数据库，我将其称为应用程序的组件。从那里我想将模型传播（如果那是正确的单词）ng-view，它加载模板以显示基于route的数据。我还希望能够使用＆＃34; top-bar＆＃34;

过滤进入视图的数据/模型

即：

INDEX.HTML：

<html ng-app="app">
<head>...</head>
<body ng-controller="appController">
  <top-bar></top-bar>
  <div ng-view></div>
</body>
</html>

APP.JS：

angular.module('app', ['top-bar','view-one','view-two', 'ngRoute']);
angular.module('app').controller('appController', function() {
  var self = this;
  this.myData = [];
  $http.get('theQuery').then(res => self.myData = res.data);
});
angular.config(function($routeProvider, $locationProvider) {
  $routeProvider
  .when('/view-one', {template:'<view-one></view-one>'})
  .when('/view-two', {template:'<view-two></view-two>'});
});

angular.module('top-bar', ['ngRoute']);
angular.module('top-bar').component('top-bar', {
  templateUrl: './app/top-bar/top-bar.template.html',
  controller: function(filterFilter) {
    this.filters = filterFilter(...);
  }
});

angular.module('view-one', ['ngRoute']);
angular.module('view-one').component('view-one', {
  templateUrl: './app/view-one/view-one.template.html',
  controller: function(filterFilter) {
    // appController.data and topBar.filters would somehow
    // need to be gotten from those respective modules.
    this.data = appController.data;
    this.filter = topBar.filters;
  }
});

我想弄清楚的是如何从主应用程序的控制器（appController）和top-bar组件获取数据，并将其发送到当前加载的任何视图进入ng-view。

我一直在网上搜索，我找不到更好的方法是在binding控制器/组件中使用binding: {data:'<'}（即view-one），$scope s系统，自定义service或其他内容。我也无法发现我会用任何一个获得数据。因此，任何答案，包括a）代码样本和b）链接到我可以阅读的进一步文档将是非常感谢。

Answer 1

建议的方法是创建服务，让不同的控制器使用对服务提供的对象的引用。

enter link description here

可能重复

Angular - 将视图连接到其他和/或父组件

1 个答案: