Error: $ compile: ctreq Required controller missing
I have the following code.
In my html:
<md-list-item ng-repeat="sidenavelem in sidenavelements">
<md-button layout="row" layout-align="start center" ng-click="SelectSidevanElements(sidenavelem); Close()" ng-bind-html="sidenavelem.name | to_trusted">a</md-button>
</md-list-item>
<md-content layout="column" flex class="md-padding">
<div dynamic="sidenavelement.template"></div>
</md-content>
This is the directive:
var app = angular.module('StarterApp', ['ngMaterial', 'mdDataTable']);
app.directive('dynamic', function ($compile) {
return {
restrict: 'A',
replace: true,
link: function (scope, ele, attrs) {
scope.$watch(attrs.dynamic, function(html) {
ele.html(html);
$compile(ele.contents())(scope);
});
}
};
});
And inside my controller
$scope.sidenavelement = $scope.sidenavelements[0];
$scope.SelectSidevanElements = function(sidelem) {
$scope.sidenavelement = sidelem;
};
$scope.sidenavelements = [
{
name: "Home",
template:
'<div layout-padding flex>' +
' <md-data-table table-card="{visible: tableCardIsEnabled}">' +
' <md-data-table-header-row>' +
' <md-data-table-column align-rule="left">Money</md-data-table-column>' +
' </md-data-table-header-row>' +
' <md-data-table-row ng-repeat="record in records">' +
' <md-data-table-cell>{{record.money}}β¬</md-data-table-cell>' +
' </md-data-table-row>' +
' </md-data-table>' +
'</div>'
},
{
name: similar above,
template: similar above
},
{
name: similar above,
template: similar
}
];
My program works like this. When I click the md button on the md-list item, the md content changes with the content of the sidenavelement.template file
I have a simple function that adds elements to array entries (what values ββare displayed in the "home template".
If I go to a "template" other than "home" and I try to insert a value inside an array of records, everything works, but I have the following error:
Can anyone help me?
Thank!
EDIT : Link Cloud9 IDE
+3
source to share