Question

我有ui-grid，允许用户选择一行：

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-grid调用：

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

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

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

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

当它在控制器内部构建时，这是有效的，但我需要

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

我应该用什么来完成这个？指示？厂？模板？别的什么？我并不完全确定如何做到这一点，但我想确保在我花时间搞清楚（时间至关重要）之前我已走上正确的轨道。

如何从控制器发送数据？
如何将数据发送到控制器？

Answer 1

我建议您使用Component。

在AngularJS中，Component是一种使用a的特殊指令   更简单的配置，适用于基于组件   申请结构。

这使得以类似于使用的方式编写应用程序变得更容易   Web组件或使用新的Angular应用程序样式   架构。

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

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

另外，采用angularjs中的组件路径，将更容易学习Angular（aka angular2）。

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

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

1 个答案: