動態定義的指令沒有被編譯

我正在嘗試做一個擴展管理器，用戶可以在其中運行和測試他們的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

動態定義的指令沒有被編譯

回答

相關問題