动态定义的指令没有被编译

我正在尝试做一个扩展管理器，用户可以在其中运行和测试他们的Angularjs指令。动态定义的指令没有被编译

用户创建一个extension对象，并将其传递给我注册指令的函数。

angular.module('CloudBoxes').directive(extension._id, 
    function() { 
     return { 
      template: extension.html, 
      restrict: 'E', 
      replace: true, 
      link: extension.js.controller, 
      scope: extension.js.scope 
     }; 
    } 
);

测试对象extension

{ 
    _id: "testid", 
    js: { 
     title: "System.Dir", 
     fa: "fa-folder", 
     include: ["$http"], 
     controller: function (scope, element, attrs) { 
      alert("I am ready"); 
     }, 
     scope: { 
      args: "=", 
     } 
    }, 
    html: "<div></div>" 
};

而且我想在我的控制器的一个测试用$compile这个动态添加指令。

$scope.$on('startExtension', function (event, id) { 
    var el = $compile("<" + id + ">" + "</" + id + ">")($scope); 
    $element.append(el); 
});

id上startExtension事件参数是我将用于动态定义指令中extension._id完全相同。

但是在$ compile之后，指令不会被替换。在DOM上，它就像下面那样

<testid class="ng-scope"></testid>

谢谢你的帮助。

来源

2016-11-28 Ahmet Can Güven

哦，我的手指！我正在努力寻找一条途径。但终于找到了一个办法做到这一点！

App.js

var providers = {}; 
angular 
    .module('CloudBoxes', [], function ($controllerProvider, $compileProvider, $provide) { 
     providers = { 
      $controllerProvider: $controllerProvider, 
      $compileProvider: $compileProvider, 
      $provide: $provide 
     }; 
    });

extensionFunction

var queueLen = angular.module('CloudBoxes')._invokeQueue.length; 
if (extension.js.window) { 
    angular.module('CloudBoxes').directive(extension._id, insertArrayAt([ 
     function() { 
      return { 
       template: extension.html, 
       restrict: 'E', 
       replace: true, 
       link: extension.js.controller, 
       scope: extension.js.scope 
      }; 
     } 
    ], 0, extension.js.include)); 
    var queue = angular.module('CloudBoxes')._invokeQueue; 
    for (var i = queueLen; i < queue.length; i++) { 
     var call = queue[i]; 
     var provider = providers[call[0]]; 
     if (provider) { 
      provider[call[1]].apply(provider, call[2]); 
     } 
    } 
    setBindings(extension); 
} else { 
    setBindings(extension); 
}

感谢谁创造了这个fiddle人！

来源

2016-11-28 21:08:37

一旦启动AngularJS应用程序，就会创建一个注入器，其中包含当时注册的所有内容。注册新组件不会将其添加到注入器，因此$compile不会看到它。

这样做的一种方法是创建第二个AngularJS应用程序，每次需要添加新组件时都会重新创建该应用程序。您将希望在与主应用程序分开的DOM中创建它以防止两者之间的冲突（可能在iframe中）。

来源

2016-11-28 20:24:22

动态定义的指令没有被编译

回答

相关问题