JavaScript / AngularJS：如何從javascript聲明指令？

Question

我需要在javascript中聲明我的html標簽（angular指令），如下所示。 如何使用正確的js語法。

$scope.myList =[ {title='Angular1' content='<div angular-one></div>'},

                 {title='Angular2' content='<div angular-two></div>'}];

稍后，我將把該值綁定回html。 我只想知道如何使用javascript在div標簽內聲明上述angular-1和angular-2指令。

在html中，我將從javascript調用傳遞的值，並將指令綁定到html中。

{{content}}

我的指令顯示為類似字符串，而不是綁定為html。

Answer 1

這很簡單，您所需要的就是創建一個簡單的指令來編譯html（使用angular提供的$ compile服務）：

.directive('compile', ['$compile', function ($compile) {
    return function(scope, element, attrs) {
        scope.$watch(
            function(scope) {
                // watch the 'compile' expression for changes
                return scope.$eval(attrs.compile);
            },
            function(value) {
                // when the 'compile' expression changes
                // assign it into the current DOM
                element.html(value);

                // compile the new DOM and link it to the current
                // scope.
                // NOTE: we only compile .childNodes so that
                // we don't get into infinite loop compiling ourselves
                $compile(element.contents())(scope);
            }
        );
    };
}]) 

您可以在這里看到一個有效的示例： https : //jsfiddle.net/scyrizales/zu2osuzb/