Hi, I'm pretty new to angular and have a requirement to build a dynamic web
app, where the screens and grids shown will vary from user to user. The
display will be built dynamically according to meta-data, config and client
state information. For example, user A may have one tab of data, user B
could have five high level tabs of data and dozens of sub-tabs - this could
change at any time. This is simple enough to do if the html is generated
server-side. However, I'm trying to get in the spirit of Angular and do it
client side. Dynamically creating and naming controllers is straight
forward:
var createDataSetController = function(dataSetName, ctrlName, gridName)
{
app.controller(ctrlName, function($scope, DataSetService) {
$scope.gridOptions = {};
$scope.gridOptions[gridName] = {
columnDefs: null,
etc etc etc
This works fine. In my test I dynamically generate four controllers and
manually write the four corresponding bits of html. However, how do I
dynamically generate the HTML? I've gone down the directive root like so:
app.directive("dsGrid", function($compile){
return{
scope:{
gname: "@"
},
link: function(scope, element){
var html = "<div class='{{gname}}'>Pah!</div>"; // line of most
interest to me
var template = angular.element(html);
var linkFn = $compile(template);
var content = linkFn(scope);
element.append(content);
}
}
});
This works fine until I do something interesting in the html template, like
try and dynamically refer to a controller e.g.
var html = "<div ng-controller='{{gname}}'>Pah!</div>";
I get the following error:
Error: [ng:areq] Argument '{{gname}}' is not a function, got undefined
The main page HTML using my directive looks like so:
<div ng-controller="uberCTRL">
<div ng-repeat="dataSet in dataSets">
<div data-ds-grid gname = "{{dataSet.dataSetCode}}"></div>
</div>
</div>
Any ideas? Am I barking up the wrong tree i.e. you can't use Angular to
template and dynamically create more Angular? Is there another approach.
Many thanks in advance.
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
