如何在AngularJs组件中使用embed Angular UiGrid

Question

我尝试在组件中嵌入 ui-grid，但嵌入的 ui-grid 不呈现

I built a Plnkr 可视化问题。

index.html

<!doctype html>
<html ng-app="app">
  <head>
    <scripts> ... </script>
  </head>
  <body>
    <div ng-controller="MainCtrl as $ctrl">
      DataGrid in HTML
      <div id="grid1" ui-grid="{ data: $ctrl.myData }" class="grid"></div>
      <h1>Template/ Component</h1>
      <hero-detail hero="$ctrl.hero" myData="$ctrl.myData"}"</hero-detail>
    </div>
    
    <script src="app.js"></script>
  </body>
</html>

app.js

angular.module('app', ['ngTouch', 'ui.grid'])
  .controller('MainCtrl', MainCtrl)
  .component('heroDetail', {
  template: `
      <div>
        DataGrid in Template
        <div id="grid1" ui-grid="{ data: $ctrl.myData }" class="grid"></div>
        <span>Name: {{$ctrl.hero.name}}</span>
        
      </div>
  `,
  bindings: {
    hero: '=',
    myData: '='
  }
});

function MainCtrl() {
  this.hero = {name: 'Spawn'};
  this.myData = [
    {
        firstName: "Cox",
        lastName: "Carney",
        company: "Enormo",
        employed: true
    },
    ...
  ];
}

您知道如何找到可行的解决方案吗？

感谢您的输入！

Answer 1

查看此 github，组件中的所有 camelCase 绑定都转换为 html 中的 kabab-case。因此，您在 index.html 中的组件引用需要从

更改

<hero-detail hero="$ctrl.hero" myData="$ctrl.myData"></hero-detail>

进入

<hero-detail hero="$ctrl.hero" my-data="$ctrl.myData"></hero-detail>

此外，旁注，您有一个错字，其中 ="$ctrl.myData"}"</hero-detail> 需要更改为 ="$ctrl.myData"></hero-detail>

如何在AngularJs组件中使用embed Angular UiGrid

How to use embed Angular UiGrid in AngularJs Component

angularjs

angular-ui-grid

ui-grid