Expression in ng-controller for a JSON-Objects with AngularJS and Ionic

I parse JSON objects to create html elements. In my case, I create from json file Buttons:

{
    "type": "button",
    "id": "comButton",
    "icon": "ion-chatboxes",
    "name": "Communication",
    "onclick": "",
    "controller": "somemthctrl",
    "ngclick": "launchSomemethod()",
    "color": "white",
    "backgroundcolor": "#ff5db1",
    "font-size": "20px"
}

Controller:

myApp.controller('generateButtonCtrl', function ($scope, $http) {
    $http.get('JSON/buttons.json').success(function(data){
        $scope.components = data;
    });
});

From the HTML page, I call the components from the json file:

<a ng-repeat="component in components"
   style="color:{{component.color}}; background-color:{{component.backgroundcolor}} "
   id="{{component.id}}"
   class="{{component.type}}"
   href="{{component.onclick}}"
   ng-click="{{component.ngclick}}"
   ng-controller="{{component.controller}}">

    <i class="{{component.icon}}"><br></i>
    {{component.name}}
</a>

In the case ng-click="{{component.ngclick}}" und ng-controller="{{component.controller}}" will not be included.

At the appropriate places I get from my editor WebStorm following error: Identifier or String literal or numeric literal expected.

I have a {{expression}} Problem. How can I integrate the ng-controller and ng-click as a string from a json object?

This is quite tricky. Angular team on their doc suggests that controller should be registered to a module while the DOM is being parsed.

All the $scope properties will be available to the template at the point in the DOM where the Controller is registered.

Link: Angular controllers

  • Use $controllerProvider to register the controller This link shed's some light on how controllers are resolved at later point of the time, which might help you in designing your code as desired.
  • ng-click you can give an expression or a method which is inside the controller of $scope tree. Both the expression and/or function search happens inside the $scope tree at the compile time of your template.

I'm not sure that it's possible the ng-controller could be a {{ expression }}. The workarround it's creating a function that returns the name of the controller that you want and you can assign to a var inside the controller...

In other case, why you want to use a different controller for each button?