如何在 AngularJs 组件中使用嵌入 Angular UiGrid

Question

I try to embed a ui-grid in a component, and the embedded ui-grid doesnt render我尝试在组件中嵌入 ui-grid，而嵌入的 ui-grid 不呈现

I built a Plnkr to visualize the problem.我构建了一个Plnkr来可视化问题。

index.html索引.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应用程序.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
    },
    ...
  ];
}

Do you have an idea how to arrive at a workable solution?您知道如何找到可行的解决方案吗？

Thanks for your input!感谢您的输入！

Answer 1

Looking at this github , all camelCase bindings in the component are translated to kabab-case in the html.查看此github ，组件中的所有 camelCase 绑定都转换为 html 中的 kabab-case。 So your component reference in the index.html needs to be changed from所以您在index.html中的组件引用需要从

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

into进入

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

Also, a side note, you have a typo where ="$ctrl.myData"}"</hero-detail> needs to be changed to ="$ctrl.myData"></hero-detail>另外，附带说明一下，您有一个错字，需要将="$ctrl.myData"}"</hero-detail>更改为="$ctrl.myData"></hero-detail>

如何在 AngularJs 组件中使用嵌入 Angular UiGrid

问题描述

1 个解决方案

解决方案1
1 已采纳 2021-03-05 16:54:40

如何在 AngularJs 组件中使用嵌入 Angular UiGrid

问题描述

1 个解决方案

解决方案1 1 已采纳 2021-03-05 16:54:40

解决方案1
1 已采纳 2021-03-05 16:54:40