I try to embed a ui-grid in a component, and the embedded ui-grid doesnt render
I built a Plnkr to visualize the problem.
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
},
...
];
}
Do you have an idea how to arrive at a workable solution?
Thanks for your input!
Looking at this github, all camelCase bindings in the component are translated to kabab-case in the html. So your component reference in the index.html
needs to be changed from
<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>