Gridster

Question

içinde AngularJS içinde dinamik olarak bir yönerge ekleyin Sadece AngularJS ile çalışmaya başladım ama bulamadığım küçük bir sorun buldum, umarım peep'ler bana yardım edebilir.

Web sayfanıza dinamik bir kılavuz eklemenin basit bir yolu olan AngularJS Gridster'i içe aktardım. Artık her şey çalışıyor ve öğe başarıyla veritabanından yüklendi ve Gridster'a aktarıldı ancak şimdi aşağıdaki şeyi yapmak istiyorum. Veritabanından alınan JSON'da "yönerge" olarak adlandırılan bir özellik de bulunmaktadır. Şimdi, her şey yüklendiğinde, her Gridster öğesinde veritabanından döndürülen yönergeyi eklemek istiyorum.

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

Şimdi bunun doğru değerini verir ve ekranda dize görüntülemek ama ben direktif clockWidget çalıştırmak istiyorum.

İnternette $ compile hakkında bir şeyler okuyorum ama bulamıyorum. Umarım peep'ler bana yardım edebilir.

Teşekkürler!

Answer 1

Evet, $compile'u kullanmanız gerekir. Bakınız documentation.

Canlı örnek üzerinde 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>