javascript - Angular，配置动态数据

Question

请参阅下面的更新。

原始问题:

这可能是关于 Angular 的一个基本问题。但这是完整的上下文。

我使用 Angular 插件 TextAngular (1.2.2)。我正在尝试使用额外的按钮扩展工具栏。在代码(客户端)中扩展工具栏效果很好(下面的代码片段)。

但我想创建我在服务器端定义的按钮 - 因此必须将它们下载到客户端。当我引入异步调用(通过使用服务)并尝试在回调中注入(inject)配置时，工具栏按钮不显示。我怀疑这是因为 Angular 引擎需要在实例化之前配置 textangular 插件。我试图创建一个提供者而不是服务，并将其提供给 .config()，但随后我得到一个关于找不到提供者的异常。

静态方法效果很好。但是我应该如何处理动态数据呢？

//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;
    }
  ]);
});

---

更新:

根据 Simeons 的帖子，我设法获得了这样的动态工具按钮:

//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

您想查看 textAngularManager 服务，您需要查看的两个函数是:

// 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)

它们不需要在提供程序中调用，因此您可以随时添加工具(还有一个 removeTool 函数)。

您面临的问题是 config 仅在加载模块时调用一次。