Veritabanından dinamik HTML dizelerini derleme

Durum

Angular uygulamamızın içinde, ng-bind-html-unsafe özniteliğine sahip bir div içeren, bir denetleyici tarafından desteklenen Sayfa adlı bir yönergedir. Bu, 'pageContent' adlı bir $ kapsam değişkenine atanır. Bu değişken, bir veritabanından dinamik olarak oluşturulmuş HTML'ye atanır. Kullanıcı bir sonraki sayfaya geçtiğinde, DB'ye bir çağrı yapılır ve pageContent değişkeni, ng-bind-html-unsafe aracılığıyla ekranda işlenen bu yeni HTML'ye ayarlanır. İşte kod:

Sayfa yönergesi

angular.module('myApp.directives')
    .directive('myPage', function ($compile) {

        return {
            templateUrl: 'page.html',
            restrict: 'E',
            compile: function compile(element, attrs, transclude) {
                // does nothing currently
                return {
                    pre: function preLink(scope, element, attrs, controller) {
                        // does nothing currently
                    },
                    post: function postLink(scope, element, attrs, controller) {
                        // does nothing currently
                    }
                }
            }
        };
    });

Sayfa yönergesinin şablonu (yukarıdaki templateUrl özelliğinden "page.html")

<div ng-controller="PageCtrl" >
   ...
   <!-- dynamic page content written into the div below -->
   <div ng-bind-html-unsafe="pageContent" >
   ...
</div>

Sayfa denetleyicisi

angular.module('myApp')
  .controller('PageCtrl', function ($scope) {

        $scope.pageContent = '';

        $scope.$on( "receivedPageContent", function(event, args) {
            console.log( 'new page content received after DB call' );
            $scope.pageContent = args.htmlStrFromDB;
        });

});

Bu işe yarıyor. Sayfanın DB'den gelen HTML'sinin tarayıcıda güzelce işlendiğini görüyoruz. Kullanıcı bir sonraki sayfaya geçtiğinde, sonraki sayfanın içeriğini görüyoruz ve bu böyle devam ediyor. Çok uzak çok iyi.

Sorun

Buradaki sorun, bir sayfanın içeriğinin içinde etkileşimli içeriğe sahip olmak istememizdir. Örneğin, HTML, kullanıcı üzerine tıkladığında, Angular'ın bir pop-up modal pencere görüntülemek gibi harika bir şey yapması gereken bir küçük resim içerebilir. Veritabanımızdaki HTML dizelerine Angular yöntem çağrıları (ng-tıklama) yerleştirdim, ancak tabii ki Angular, HTML dizesini bir şekilde ayrıştırmadığı, tanımadığı ve derlemediği sürece yöntem çağrılarını veya yönergeleri tanımayacaktır.

DB'mizde

Sayfa 1 için İçerik:

<p>Here's a cool pic of a lion. <img src="lion.png" ng-click="doSomethingAwesone('lion', 'showImage')" > Click on him to see a large image.</p>

Sayfa 2 için İçerik:

<p>Here's a snake. <img src="snake.png" ng-click="doSomethingAwesone('snake', 'playSound')" >Click to make him hiss.</p>

Sayfa denetleyicisine geri döndükten sonra ilgili $ kapsam işlevini ekliyoruz:

Sayfa denetleyicisi

$scope.doSomethingAwesome = function( id, action ) {
    console.log( "Going to do " + action + " with "+ id );
}

Bu 'doSomethingAwesome' yöntemini DB'deki HTML dizesinin içinden nasıl çağıracağımı çözemiyorum. Angular'ın HTML dizesini bir şekilde ayrıştırması gerektiğinin farkındayım, ama nasıl? $ Compile hizmeti hakkında muğlak mırıltılar okudum ve bazı örnekleri kopyalayıp yapıştırdım ama hiçbir şey işe yaramıyor. Ayrıca, çoğu örnek dinamik içeriğin yalnızca direktifin bağlanma aşamasında ayarlandığını gösterir. Page'in uygulamanın ömrü boyunca hayatta kalmasını isteriz. Kullanıcı sayfalar arasında gezinirken sürekli olarak yeni içerik alır, derler ve görüntüler.

Soyut anlamda, Angular parçalarını bir Angular uygulamasına dinamik olarak yerleştirmeye çalıştığımızı ve bunları içeri ve dışarı değiştirebilmemiz gerektiğini söyleyebiliriz.

Çeşitli Angular dokümantasyon parçalarının yanı sıra her türden blog gönderisini ve insanların koduyla JS Fiddled okudum. Angular'ı tamamen yanlış mı anladığımı yoksa basit bir şeyi mi kaçırdığımı bilmiyorum ya da belki yavaşım. Her durumda, bazı tavsiyelerde bulunabilirim.

ng-bind-html-unsafeiçeriği yalnızca HTML olarak işler. Angular kapsamı sonuçlanan DOM'a bağlamaz. Bunun için $compileservisi kullanmalısınız . Oluşturduğum bu plunker nasıl kullanılacağını göstermek için $compilebir yönerge render dinamik HTML kullanıcılar tarafından girilen ve kontrolörün kapsamına bağlanarak oluşturun. Kaynak aşağıda yayınlanmıştır.

demo.html

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script data-require="angular.js@1.0.7" data-semver="1.0.7" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    <h1>Compile dynamic HTML</h1>
    <div ng-controller="MyController">
      <textarea ng-model="html"></textarea>
      <div dynamic="html"></div>
    </div>
  </body>

</html>

script.js

var app = angular.module('app', []);

app.directive('dynamic', function ($compile) {
  return {
    restrict: 'A',
    replace: true,
    link: function (scope, ele, attrs) {
      scope.$watch(attrs.dynamic, function(html) {
        ele.html(html);
        $compile(ele.contents())(scope);
      });
    }
  };
});

function MyController($scope) {
  $scope.click = function(arg) {
    alert('Clicked ' + arg);
  }
  $scope.html = '<a ng-click="click(1)" href="#">Click me</a>';
}

Açısal 1.2.10'da satır scope.$watch(attrs.dynamic, function(html) {, değeri attrs.dynamichtml metni olan izlemeye çalıştığı için geçersiz bir karakter hatası döndürüyordu .

Kapsam özelliğinden özniteliği getirerek bunu düzelttim

 scope: { dynamic: '=dynamic'}, 

Benim örneğim

angular.module('app')
  .directive('dynamic', function ($compile) {
    return {
      restrict: 'A',
      replace: true,
      scope: { dynamic: '=dynamic'},
      link: function postLink(scope, element, attrs) {
        scope.$watch( 'dynamic' , function(html){
          element.html(html);
          $compile(element.contents())(scope);
        });
      }
    };
  });

Bir google tartışma grubunda bulundu. Benim için çalışıyor.

var $injector = angular.injector(['ng', 'myApp']);
$injector.invoke(function($rootScope, $compile) {
  $compile(element)($rootScope);
});

Kullanabilirsiniz

ng-bind-html https://docs.angularjs.org/api/ng/service/$sce

html'yi dinamik olarak bağlama yönergesi. Ancak verileri $ sce hizmeti aracılığıyla almanız gerekir.

Lütfen http://plnkr.co/edit/k4s3Bx adresindeki canlı demoya bakın

var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope,$sce) {
    $scope.getHtml=function(){
   return $sce.trustAsHtml("<b>Hi Rupesh hi <u>dfdfdfdf</u>!</b>sdafsdfsdf<button>dfdfasdf</button>");
   }
});

  <body ng-controller="MainCtrl">
<span ng-bind-html="getHtml()"></span>
  </body>

Html'yi attr aracılığıyla bağlamak için aşağıdaki kodu deneyin

.directive('dynamic', function ($compile) {
    return {
      restrict: 'A',
      replace: true,
      scope: { dynamic: '=dynamic'},
      link: function postLink(scope, element, attrs) {
        scope.$watch( 'attrs.dynamic' , function(html){
          element.html(scope.dynamic);
          $compile(element.contents())(scope);
        });
      }
    };
  });

Bu element.html (kapsam.dynamic) öğesini deneyin; element.html'den (attr.dynamic);