Dynamisch eine Direktive in AngularJS innerhalb von Gridster hinzufügen

Question

Ich habe gerade angefangen mit AngularJS zu arbeiten, aber ich habe ein kleines Problem gefunden, das ich nicht herausfinden kann, ich hoffe du kannst mir helfen.

Ich habe AngularJS Gridster importiert, eine einfache Möglichkeit, Ihrer Webseite ein dynamisches Raster hinzuzufügen. Jetzt funktioniert alles und das Element wird erfolgreich aus der Datenbank geladen und in Gridster importiert, aber jetzt möchte ich folgendes tun. Im JSON, das aus der Datenbank abgerufen wird, gibt es auch ein Attribut namens "Direktive". Jetzt, wenn alles geladen ist, möchte ich in jedem Gridster-Element die Direktive hinzufügen, die von der Datenbank zurückgegeben wird.

<ul> 
    <li gridster-item="item" ng-repeat="item in gridsterItems"> 
     {{ item.directive }} // Returns <clock-widget></clock-widget> and print it to the screen, but it dont run the directive and doesn't display. 
    </li> 
</ul> 

Jetzt gibt es den richtigen Wert und zeigt die Zeichenfolge auf dem Bildschirm, aber ich will es Direktive Clock laufen.

app.directive('clockWidget', function() { 
return { 
    replace: true, 
    template: 'Yups, I am the clockwidget', 
}; 
}); 

Im Internet lese ich etwas über $ kompilieren, aber ich kann nicht herausfinden. Ich hoffe du kannst mir helfen.

Danke!

Answer 1

Ja, Sie brauchen $compile. Siehe documentation.

Live Beispiel auf jsfiddle.

angular.module('ExampleApp', []) 
 
    .controller('ExampleController', function($scope) { 
 
    $scope.directives = ["<directive-one></directive-one>", "<directive-two val='inputVal'></directive-two>"]; 
 
    }) 
 
    .directive('compileDirective', function($compile) { 
 
    return { 
 
     restrict: "E", 
 
     replace: true, 
 
     link: function(scope, element, attr) { 
 
     scope.$watch(function() { 
 
      return attr.directive; 
 
     }, function(val) { 
 
      element.html(""); 
 
      if (val) { 
 
      var directive = $compile(angular.element(val))(scope); 
 
      element.append(directive); 
 
      } 
 
     }); 
 
     } 
 
    }; 
 
    }) 
 
//Directives for example 
 
    .directive('directiveOne', function($compile) { 
 
    return { 
 
     replace: true, 
 
     template: "<div>i'm directive one</div>" 
 
    }; 
 
    }) 
 
    .directive('directiveTwo', function($compile) { 
 
    return { 
 
     replace: true, 
 
     scope:{val:"="}, 
 
     template: "<div>i'm directive two with val={{val}}</div>" 
 
    }; 
 
    }) 
 
    .directive('directiveThree', function($compile) { 
 
    return { 
 
     replace: true, 
 
     scope:{val:"="}, 
 
     template: "<div>i'm directive three</div>" 
 
    }; 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
<div ng-app="ExampleApp"> 
 
    <div ng-controller="ExampleController"> 
 
    <select ng-model="selectDirective" ng-options="dir for dir in directives"> 
 
    </select> 
 
    <input ng-model="inputVal"> 
 
    <compile-directive directive="{{selectDirective}}"></compile-directive> 
 
    <compile-directive directive="<directive-three></directive-three>"></compile-directive> 
 
    </div> 
 
</div>