在不同的范围内使用相同的模板

Question

我有一个 ui-grid 允许用户 select 一行：

angular.module("app").component("mycomponent", {
  templateUrl: "View.html",
  controllerAs: "m",
  controller: [Interactor_Controller]
})


function Interactor_Controller() {
  var m = this
  m.gridOptions = {enableRowSelection: true, enableRowHeaderSelection: false}
  m.gridOptions.columnDefs = [
    {field: "id"},
    {field: "name"}
  ]
  m.gridOptions.multiSelect = false

  m.gridOptions.onRegisterApi = function(gridApi){
    m.infoGridApi = gridApi
    gridApi.selection.on.rowSelectionChanged(null, function(row){
      m.infoGridSelectedRow = row.entity
    })
  }

  $http
    .get('lottastuff')
    .success(response => {
      m.gridOptions.data = response 
      m.gridApi.selection.selectRow(m.gridOptions.data[0]);
      m.gridSelectedRow = m.gridApi.selection.getSelectedRows()
    })
}

模板只是一个 ui-网格调用：

<div class="gridStyle" ui-grid="m.gridOptions" ui-grid-selection></div>

我希望能够做这样的事情：

<div class="container-fluid">
  <div class="xs-col-12">
    <myReusableGrid>
  </div>
</div>

（隐含范围，因为组件使用该页面作为模板）。

当它在控制器中时 uilt 可以工作，但我需要

在多个视图中重复使用
从控制器获取数据
将 selected 行发送到控制器及其插入的视图。

我应该用什么来完成这个？指示？工厂？模板？还有别的吗？我不太确定如何做大部分，但我想在花时间弄清楚之前确保我走在正确的轨道上（时间是必不可少的）。

如何从控制器发送数据？
如何向控制器发送数据？

Answer 1

我推荐你使用组件。

In AngularJS, a Component is a special kind of directive that uses a simpler configuration which is suitable for a component-based application structure.

This makes it easier to write an app in a way that's similar to using Web Components or using the new Angular's style of application architecture.

来源：https://docs.angularjs.org/guide/component

我真的很喜欢组件，因为它是为视图的特定部分而不是状态编写控制器。

此外，采用 angularjs 中的组件路径，将使您更容易学习 Angular (aka angular2)。

本教程对我帮助很大：https://tests4geeks.com/build-angular-1-5-component-angularjs-tutorial/

在不同的范围内使用相同的模板

Use the same template on different scopes

angularjs

angular-ui-grid