Angular, config with dynamic data

Question

See update below.

Original question:

This might be a fundemental question about Angular. But here is the full context.

I use the Angular plugin TextAngular (1.2.2). I am trying to extend the toolbars with extra buttons. Extending the toolbar in code (client side) works rather well (se snippet below).

But i want to create buttons which i define serverside - thus they have to be downloaded to the client. When i introduce an async call (by using a service) and try to inject the config in the callback, the toolbar buttons does not show up. I suspect that this is because the angular engine needs to configure the textangular plugin, before instantiating. I have tried to create a provider, instead of a service, and feed that to the .config(), but then i get an exception about the provider not being found.

The static approach works rather well. But how should i approach this with dynamic data?

//Module
var myApp = angular.module('myApp', ['textAngular']);

//Configuration
myApp.config(function($provide) {
  $provide.decorator('taOptions', ['taRegisterTool', '$delegate',
    function(taRegisterTool, taOptions) {

      //I found these helpers somewhere
      var insertToolHelper = {
        insertTextAtCursor: function(text) {
          var sel, range;
          if (window.getSelection) {
            sel = window.getSelection();
            if (sel.getRangeAt && sel.rangeCount) {
              range = sel.getRangeAt(0);
              range.deleteContents();
              range.insertNode(document.createTextNode(text));
            }
          } else if (document.selection && document.selection.createRange) {
            document.selection.createRange().text = text;
          }
        },
        moveCaret: function(charCount) {
          var sel, range;
          if (window.getSelection) {
            sel = window.getSelection();
            if (sel.rangeCount > 0) {
              var textNode = sel.focusNode;
              sel.collapse(textNode.nextSibling, charCount);
            }
          } else if ((sel = window.document.selection)) {
            if (sel.type != "Control") {
              range = sel.createRange();
              range.move("character", charCount);
              range.select();
            }
          }
        }
      };
      var customToolbarElements = [{
        value: "$name",
        description: "Name",
        faIcon: "fa fa-user"
      }, {
        value: "$today",
        description: "Date",
        faIcon: "fa fa-calendar"
      }];

      taOptions.toolbar.push([]); //Tilføj ny toolbar

      angular.forEach(customToolbarElements, function(item) {
        taRegisterTool(item.description, {
          iconclass: item.faIcon,
          tooltiptext: item.description,
          action: function() {
            insertToolHelper.insertTextAtCursor(item.value);
            return insertToolHelper.moveCaret(1);
          }
        });
        // register the tool with textAngular   
        taOptions.toolbar[4].push(item.description);

      }, this);

      return taOptions;
    }
  ]);
});

---

Update:

Based on Simeons post, i managed to get the dynamic toolbuttons like this:

//Module
var myApp = angular.module('myApp', ['textAngular']);
//Service
myApp.service('ConfigurationData', [
    '$http', '$q', function (http, q) {
        var deferredConfig = q.defer();


    //This method returns someting like [{ value: "name", description: "Person name", faIcon: "fa fa-user" }];
    http.get(location.pathname + '/api/templates').success(function (data) {
        return deferredConfig.resolve(data);
    });
    return {
        getConfig: function () {
            return deferredConfig.promise;
        }
    };
   }
]);
//Controller    
myApp.controller('SettingsCtrl', [
    '$scope', 'textAngularManager', 'ConfigurationData',
    function ($scope, $rootScope, textAngularManager, configurationData) {

        var insertToolHelper = {
                insertTextAtCursor: function (text) {
                    var sel, range;
                    if (window.getSelection) {
                        sel = window.getSelection();
                        if (sel.getRangeAt && sel.rangeCount) {
                            range = sel.getRangeAt(0);
                            range.deleteContents();
                            range.insertNode(document.createTextNode(text));
                        }
                    } else if (document.selection && document.selection.createRange) {
                        document.selection.createRange().text = text;
                    }
                },
                moveCaret: function (charCount) {
                    var sel, range;
                    if (window.getSelection) {
                        sel = window.getSelection();
                        if (sel.rangeCount > 0) {
                            var textNode = sel.focusNode;
                            sel.collapse(textNode.nextSibling, charCount);
                        }
                    } else if ((sel = window.document.selection)) {
                        if (sel.type != "Control") {
                            range = sel.createRange();
                            range.move("character", charCount);
                            range.select();
                        }
                    }
                }
        };
        configurationData.getConfig().then(function (config) {
            var customToolbarElements = config.jsonArrayFromService;

            angular.forEach(customToolbarElements, function (item) {

                var desc = item.description ? item.description : "unknown tool";

                textAngularManager.addTool(desc, {
                        iconclass: item.faIcon ? item.faIcon : "fa fa-gear",
                        tooltiptext: desc,
                        action: function () {
                            insertToolHelper.insertTextAtCursor(item.value);
                            return insertToolHelper.moveCaret(1);
                        }
                    });

                }, this);
            });
   }
]);

Answer 1

You want to have a look at the textAngularManager service, the two functions you'll want to look at are:

// toolkey, toolDefinition are required. If group is not specified will pick the last group, if index isnt defined will append to group
textAngularManager.addTool(toolKey, toolDefinition, group, index)
// adds a Tool but only to one toolbar not all
textAngularManager.addToolToToolbar(toolKey, toolDefinition, toolbarKey, group, index)

They don't need to be called in the provider so you can add Tools at any time (there is also a removeTool function as well).

The problem you faced is that config is only called once when the module is loaded.