Durumu

Açısal bizim app içinde yuvalanmış bir Sayfa Direktifi olarak adlandırılan, ng-bind-html-güvenli olmayan bir öznitelik ile bir div içeren bir kontrolör tarafından desteklenmektedir. Bu kapsamda var bir $adlı atanır ''. pageContent Bu var dinamik olarak oluşturulan HTML bir veritabanından atanır. Kullanıcı çevirir Sonraki sayfa, bir adlı DB yaptı, ve pageContent var. ayarlamak için bu yeni bir HTML alır, hangi render ekran üzerinden ng-bind-html-güvensiz. İş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 Direktifi şablon("page.html" templateUrl özelliği yukarıda)

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

});

O çalışır. DB gelen sayfanın HTML güzel tarayıcıda işlenen görüyoruz. Kullanıcı bir sonraki sayfaya vurduğunda, bir sonraki sayfanın içeriğini ve görüyoruz. Şimdiye kadar çok iyi.

Sorun

Burada sorun, bir sayfanın içeriğini içinde etkileşimli içerik yaratmak istiyoruz. Örneğin HTML, kullanıcının tıklama, Açısal muhteşem bir şey, pop-up, kalıcı bir pencere görüntüleme gibi yapman gereken küçük bir resim içerebilir. Olduğum yer Açısal yöntem çağrıları (ng-click) HTML dizeleri bizim veritabanı, ama elbette Açısal yaramayacak tanımak ya da bu yöntemi çağırır veya direktifleri sürece bir şekilde ayrıştırır HTML dize, onları tanır ve onlara derler.

Bizim DB

Sayfa 1 . iç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>

2 Sayfa İçeriği:

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

Sayfa denetleyicisi geriye gidip sonra kapsam fonksiyonu karşılık gelen $Ekle:

Sayfa denetleyicisi

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

'DoSomethingAwesome' DB HTML dize içinde yöntem. bunu nasıl çözebilirim. Açısal HTML dizesi bir şekilde ayrıştırmak için vardır, ama ne fark ettim? Hizmet derleme ve kopyalanan ve bazı örnekler yapıştırılan $hakkında belirsiz mırıltılar okudum, ama hiçbir şey çalışır. Ayrıca, en örnekler, dinamik içerik, yalnızca direktifin bağlantı aşamasında belirlenmesini gösteriyor. Sayfa uygulama ömrü boyunca hayatta kalmak isterdik. Sürekli alır, kullanıcı sayfaları aracılığıyla çevirir ve yeni içerik derler görüntüler.

Soyut bir anlamda, Açısal bir uygulama içinde dinamik olarak yuva Açısal parçaları için çalışıyoruz diyebiliriz, ve onları dışarı takas etmek gerekiyor.

Açısal belgeleri birden çok kez olarak blog yazıları her türlü çeşitli bit okudum, ve JS halk kodu ile Oynuyordu. Tamamen Açısal bir yanlış anlaşılma ya da sadece basit bir şey eksik olup olmadığımı bilmiyorum, belki de ben yavaşım. Her durumda, bazı tavsiyelerinize ihtiyacım var.

ng-bind-html-unsafe sadece HTML olarak içeriği oluşturur. Neden DOM Açısal kapsam bağlama değil. Sana $compile servis kullanmak bu amaç için var. this plunker ** 16 yaşında bir Direktif dinamik HTML kullanıcılar tarafından girilen işleme ve kumandanın kapsam bağlama oluşturmak için nasıl kullanılacağını göstermek için yarattım. 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>';
}