Kompilasi string HTML dinamis dari basis data

Situasi

Bersarang di dalam aplikasi Angular kami adalah arahan yang disebut Page, didukung oleh controller, yang berisi div dengan atribut ng-bind-html-unsafe. Ini ditugaskan ke $ scope var yang disebut 'pageContent'. Var ini akan diberikan HTML yang dihasilkan secara dinamis dari database. Ketika pengguna membalik ke halaman berikutnya, dipanggil ke DB dibuat, dan pageContent var diatur ke HTML baru ini, yang akan ditampilkan di layar melalui ng-bind-html-tidak aman. Berikut kodenya:

Arahan halaman

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
                    }
                }
            }
        };
    });

Templat direktif halaman ("page.html" dari properti templateUrl di atas)

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

Pengontrol halaman

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;
        });

});

Itu bekerja. Kami melihat HTML laman dari DB yang ditampilkan dengan baik di peramban. Ketika pengguna membalik ke halaman berikutnya, kami melihat konten halaman berikutnya, dan seterusnya. Sejauh ini baik.

Masalah

Masalahnya di sini adalah bahwa kami ingin memiliki konten interaktif di dalam konten halaman. Misalnya, HTML dapat berisi gambar mini di mana, ketika pengguna mengkliknya, Angular harus melakukan sesuatu yang luar biasa, seperti menampilkan jendela modal pop-up. Saya telah menempatkan panggilan metode Angular (ng-klik) di string HTML di database kami, tapi tentu saja Angular tidak akan mengenali panggilan metode atau arahan kecuali entah bagaimana mem-parsing string HTML, mengenali mereka dan mengkompilasi mereka.

Dalam DB kami

Konten untuk Halaman 1:

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

Konten untuk Halaman 2:

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

Kembali ke pengontrol halaman, kami kemudian menambahkan fungsi $ scope yang sesuai:

Pengontrol halaman

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

Saya tidak tahu bagaimana memanggil metode 'doSomethingAwesome' dari dalam string HTML dari DB. Saya menyadari Angular harus mengurai string HTML, tetapi bagaimana caranya? Saya telah membaca gumaman samar tentang layanan $ compile, dan menyalin dan menempel beberapa contoh, tetapi tidak ada yang berhasil. Juga, sebagian besar contoh menunjukkan konten dinamis hanya diatur selama fase penautan arahan. Kami ingin Page tetap hidup sepanjang masa aplikasi. Terus menerima, mengkompilasi dan menampilkan konten baru saat pengguna membalik-balik halaman.

Dalam arti abstrak, saya kira Anda bisa mengatakan kami mencoba untuk secara dinamis memotong sarang Angular dalam aplikasi Angular, dan harus dapat menukar mereka masuk dan keluar.

Saya telah membaca berbagai bit dokumentasi Angular beberapa kali, dan juga segala macam posting blog, dan JS Mengotak-atik kode orang. Saya tidak tahu apakah saya benar-benar salah paham tentang Angular, atau hanya melewatkan sesuatu yang sederhana, atau mungkin saya lambat. Bagaimanapun, saya bisa menggunakan beberapa saran.

ng-bind-html-unsafehanya menjadikan konten sebagai HTML. Itu tidak mengikat lingkup sudut ke DOM yang dihasilkan. Anda harus menggunakan $compilelayanan untuk tujuan itu. Saya membuat plunker ini untuk mendemonstrasikan cara menggunakan $compileuntuk membuat directive rendering dynamic HTML yang dimasukkan oleh pengguna dan mengikat ke lingkup controller. Sumber diposting di bawah ini.

demo.html

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

  <head>
    <script data-require="[email protected]" 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>';
}

Di sudut 1.2.10 baris scope.$watch(attrs.dynamic, function(html) {mengembalikan kesalahan karakter yang tidak valid karena mencoba untuk melihat nilai attrs.dynamicyang merupakan teks html.

Saya memperbaikinya dengan mengambil atribut dari properti scope

 scope: { dynamic: '=dynamic'}, 

Contoh saya

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);
        });
      }
    };
  });

Ditemukan dalam grup diskusi google. Bekerja untukku.

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

Kamu bisa memakai

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

arahan untuk mengikat html secara dinamis. Namun Anda harus mendapatkan data melalui layanan $ sce.

Silakan lihat demo langsung di http://plnkr.co/edit/k4s3Bx

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>

Coba kode di bawah ini untuk mengikat html melalui attr

.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);
        });
      }
    };
  });

Coba element.html ini (scope.dynamic); dari element.html (attr.dynamic);