Вызов dynamicPrint() динамически в AngularJS руинах привязки

Question

Я пытаюсь прикрыть некоторый текст, который генерируется динамически.

<div ng-app="Knob" ng-controller="myCtrl"> 
    <pre class="prettyprint">{{text}}</pre> 
</div> 

var App = angular.module('Knob', []); 
App.controller('myCtrl', function($scope) { 
    $scope.text = "hello world"; 
}) 

App.directive('prettyprint', function() { 
    return { 
     restrict: 'C', 
     link: function postLink(scope, element, attrs) { 
       prettyPrint(); 
     } 
    }; 
}); 

Выход:

hello worldtext}} 

Любые идеи, почему?

http://jsfiddle.net/yAv4f/62/

Answer 1

Трудно сказать, что это prettyPrint() должен возвращать?

Это кажется довольно странным, что вы не даете никаких аргументов в prettyPrint ...

Кстати, я думаю, угловой фильтр будет лучше подходит для вашей потребности, а не директивы.

[EDIT]

Это один работает "динамически" с помощью фильтра:

HTML:

<div ng-app="Knob" ng-controller="myCtrl"> 
    <!--<input ng-model="text" type="text"/>--> 
    <pre ng-bind-html-unsafe="text|pretty"></pre> 
</div> 

ЯШ:

var App = angular.module('Knob', []); 
App.controller('myCtrl', function($scope) { 
    setTimeout(function() { 
     $scope.text = "class Voila {};"; 
     $scope.$apply(); 
    }, 0); 
}); 

App.filter('pretty', function(){ 
    return function(text) { 
     return prettyPrintOne(text); 
    } 
}) 

Вы можете увидеть это в

http://jsfiddle.net/cSXpV/1/

Вы можете раскомментировать вход непосредственно изменить текст, который будет prettyfied

Обратите внимание, что эта версией является для угловых 1.1.1 (версии вы в выбранной выше вашей первоначальной jsfiddle) , для Angular 1.2. *, вы должны использовать ng-bind-html и модуль ngSanitize

Последний вопрос: теперь, когда он динамически разрешен, можно применить методы setTimeOut и $ scope. $ apply (информация для re Адерс)

[/ EDIT]

Answer 2

Это может быть достигнуто за счет небольшой директивы. Найти ответ здесь AngularJs how to call prettyprint?

Я хотел бы сделать небольшое дополнение к директиве по @carlosmantilla

Вы можете достичь того же, не создавая переменную области видимости. Я добавил эту поправку на github

Это должно работать должным образом.

http://jsfiddle.net/yAv4f/143/

var App = angular.module('Knob', []); 
App.controller('myCtrl', function($scope) { 
    $scope.text = "function f1(){int a;}"; 
}) 

function replaceText(str) 
{ 
    var str1 = String(str); 
    return str1.replace(/\n/g,"<br/>"); 
} 

app.directive('prettyprint', function() { 
    return { 
     restrict: 'C', 
     link: function postLink(scope, element, attrs) { 
       element.html(prettyPrintOne(replaceText(element.html()),'',true)); 
     } 
    }; 
}); 

Answer 3

это поздно ответ и я уверен, что вы решили эту проблему. Однако, возможно, некоторые другие люди наткнулись на эту тему с той же проблемой.Я решил использовать и адаптированную версию google-code prettify, которую можно найти здесь: https://github.com/angular/code.angularjs.org/tree/master/1.3.0-beta.3/docs/components/google-code-prettify-1.0.1 Просто следуйте инструкциям на этой странице.

Теперь prettifyPrint() можно назвать глобально.

(function(){ 
    $('pre').addClass('prettyprint'); 
    prettyPrint(); 
})(); 

Я поместил это в нижней части моего динамического шаблона

Answer 4

Моя директива. Он ждет $viewContentLoaded, чтобы убедиться, что шаблон var ({{}}) в нем уже был вычислен угловым. следует использовать в <pre>

.directive('prettyprint', function() { 
    return { 
    restrict: 'C', 
    link: function postLink(scope, element) { 
     scope.$on('$viewContentLoaded', function(){ 
     element.html(prettyPrintOne(element.html(),'',true)); 
     }); 
    } 
    }; 
}); 

Answer 5

Пожалуйста, попробуйте использовать нг-Bind-HTML.

<div ng-app="Knob" ng-controller="myCtrl"> 
    <pre class="prettyprint" ng-bind-html="text"></pre> 
</div> 


app.directive('prettyprint', function() { 
    return { 
     restrict: 'C', 
     link: function postLink(scope, element, attrs) { 
      element.html(prettyPrintOne(element.html(),'',true)); 
     } 
    }; 
}); 

Answer 6

Я не знаю, почему, но я считаю, если вы задерживаете 300 мс для выполнения функции prettyprint, он хорошо работает. смотри ниже:

var App = angular.module('Knob', []); 
App.controller('myCtrl', function($scope) { 
    $scope.text = "hello world"; 
}) 

App.directive('prettyprint', function() { 
    return { 
     restrict: 'C', 
     link: function postLink(scope, element, attrs) { 
       setTimeout(prettyPrint,300); 
     } 
    }; 
});