class Dashboard {
static get controller() { return [Dashboard]; }
static get controllerAs() { return 'vm'; }
static get template() { return '<ng-transclude></ng-transclude>'; }
static get transclude() { return true; }
constructor() {
this.name="Bob";
}
}
class InfoPanel {
static get template() { return '<span>My name is !</span>'; }
static get controller() { return [InfoPanel]; }
static get controllerAs() { return 'vm'; }
static get bindings() {
return {
value: '<'
};
}
constructor() {
}
}
angular.module("dashboardApp", [])
.component("dashboard", Dashboard)
.component("infoPanel", InfoPanel);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script>
<body ng-app="dashboardApp">
<dashboard>
<info-panel value="vm.name"></info-panel>
</dashboard>
</body>
I’m trying to pass some component data to it’s transcluded markup but I’m getting undefined. Is this possible where vm.name is part of the dashboard component?
<dashboard>
<info-panel info-data="vm.name"></info-panel>
</dashboard>
It works if I don’t use transclusion and just have the info-panel inside the dashboard template but I think visually it looks better to allow it more inline to the dashboard itself.
Source: AngularJS
from Angular Questions https://angularquestions.com/2017/10/09/angular-1-x-passing-data-to-transcluded-markup/
via @lzomedia #developer #freelance #web #lzomedia.com
No comments:
Post a Comment