Как сделать ng-bind-html компилировать код angularjs

это то, что я сделал, не знаю, если это угловое способом^_TM, но это работает и очень просто;

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

так,

<div id="unicTab" dynamic="unicTabContent"></div>

---

Edit:я нашел угловой путь, и супер простой.

$templateCache.put('unicTabContent', $sce.trustAsHtml(html));

<div id="unicTab" ng-include="'unicTabContent'"></div>

не нужно делать свои собственные директивы или что-нибудь. Но это привязка-когда-то вроде сделки, он не будет видеть изменения HTML-код как пользовательские директива.

<script type="text/ng-template" id="unic_tab_template.html">
    <div ng-switch on="page">
        <div ng-switch-when="home"><p>{{home}}</p></div>
        <div ng-switch-when="form">
            <div ng-controller="formCtrl">
                <div ng-repeat="item in content">{{item.name}}:{{item.value}}</div>
            </div>
        </div>
        <div ng-switch-default>an error accured</div>
    </div>
</script>

этот шаблон является условным, поэтому в зависимости от значения $scope.страница, она переключается между 3 шаблонами (третий является обработчиком ошибок). Чтобы использовать его у меня было :

<div id="unicTab" ng-controller="unicTabCtrl">
    <div ng-include="'unic_tab_template.html'"></div>
</div>

таким образом, моя страница изменяется в зависимости от $ scope внутри моего unicTabCtrl контроллер.

чтобы завершить идею вставки швов шаблона angularsjs, которые трудно реализовать ($compile seams to be the solution, но я не смог заставить его работать). Но вместо этого вы можете использовать условные шаблоны.

Я пытался сделать то же самое и наткнулся на этот модуль.

http://ngmodules.org/modules/ng-html-compile

Я просто включил его, и тогда я был в состоянии использовать "НГ-HTML-код-компиляции" вместо "НГ-привязать HTML-код"

один из способов-использовать директиву для вставки пользовательских шаблонов, которые включают угловые выражения

<div id="unicTab" unic-tab-content></div>

app.directive("unicTabContent",function(){
   return {
      restrict:"A",
      template:'{{unicTabContent}}'
   }
})

мое решение подобной проблемы в моем текущем приложении без использования шаблона (не элегантный, но работает):

directive('ngBindHtmlCompile', ['$compile', function ($compile) {
    return {
        restrict: 'A',
        compile: function compile(tElement, tAttributes, transcludeFn) {
            return function postLink(scope, element, attributes) {
                scope.$watch(function() {
                    return scope.$eval(attributes.ngBindHtml);
                }, function(newValue, oldValue) {
                    $compile(element.children())(scope);
                });
            };
        }
    };
}]);

требует ngBindHtml на том же элементе и компилирует содержимое элемента после его изменения с ngBindHtml.

<div id="unicTab" ng-bind-html="unicTabContent" ng-bind-html-compile></div>

ng-html-compile похоже, но на первый взгляд он не будет пересчитан при изменении содержимого шаблона. Но я еще не пробовал.

приведенный ниже код намного проще, используя встроенные объекты Angular $interpolate и $sce. Сначала введите угловые объекты $interpolate и $sce в вашу директиву, поскольку вы делаете все, что вам нужно в вашей директиве.

amqApp.directive('myDir', ['$interpolate', '$sce', function ($interpolate,$sce ) {...}

затем создайте все переменные области, найденные в импортированных выражениях html...

$scope.custom = 'Hello World';

затем используйте $interpolate для обработки пользовательского HTML и его выражений...затем убедитесь, что вы используете объект $sce, чтобы доверять ему как HTML раньше обязательный...

var html = $interpolate('<b>{{custom}}</b>')($scope);    
$scope.data = $sce.trustAsHtml(html);

наконец, на ваш взгляд, просто убедитесь, что использовать элемент с "ng-bind" или "ng-bind-html" на нем в вашем представлении дисплея. Я нашел кусок $sce не будет отображать HTML как HTML (видит его как текст), если вы не свяжете его в своем шаблоне html, как это...

<span ng-bind-html="data"></span>

вы должны видеть жирным шрифтом...

Привет, Мир

я использовал этот трюк для импорта в текст / HTML с помощью пользовательских угловых {{выражений}} из a сеть.конфиг.

много упрощенное решение @clement-roblot на основе встроенных шаблонов.

:

app.controller('TestCtrl', [
    '$scope',
    '$templateCache',
    function ($scope, $templateCache) {
        $templateCache.put('test.html', '2 + 2 = {{ 2 + 2 }}');
    }
]);

View:

<div ng-include="'test.html'"></div>