AngularJS: Использование директив в динамическом HTML

Я пытаюсь построить динамические строки HTML, которые включают директиву, которая реагирует на изменения в переменной области. Если я строю строки статически, то мой $watch работает правильно, но если строки динамические, то $watch никогда не срабатывает.AngularJS: Использование директив в динамическом HTML

Я уверен, что ответ лежит где-то в использовании $compile, и я изучил многочисленные примеры, но я не могу заставить их работать для моих конкретных потребностей.

Возможно ли это?

Мой plunkr, который демонстрирует ссылки на предложения с надстрочным тегом.

index.html

<body ng-controller="MainCtrl"> 
    <h3>Static Example</h3> 
    <div>Humpty Dumpty sat<ref><sup>1</sup></ref> on a wall.</div> 
    <div>Humpty Dumpty had a great<ref><sup>2</sup></ref> fall.</div> 

    <h3>Dynamic Example</h3> 
    <div ng-repeat="item in dynamic"> 
     <span ng-bind-html="item | to_trusted"></span> 
    </div> 
    <br> 
    <input type="checkbox" ng-click="sup = !sup"> hide/show 
</body>

app.js

var app = angular.module('app', []) 
    .filter('to_trusted', ['$sce', function($sce) { 
    return function(text) { 
     return $sce.trustAsHtml(text); 
    }; 
}]); 

app.controller('MainCtrl', function($scope) { 
    $scope.sup = true; 
    $scope.dynamic = ["Humpty Dumpty sat on a wall.<ref><sup>1</sup></ref>", 
        "Humpty Dumpty had a great fall.<ref><sup>2</sup></ref>"]; 
}); 

app.directive('sup', function($compile) { 
    return { 
    restrict: 'E', 
    link: function(scope, element) { 
     scope.$watch('sup', function() { 
     element.css({ display: scope.sup ? 'inline' : 'none' }); 
     }); 
    } 
}});

источник

2014-10-20 ScottD

Я не знаю, если это любой связанной с ними, но я думаю, что это может быть полезно http://stackoverflow.com/questions/26447885/how-directives-are-invoked-if -an-element-that-contains-a-directive-is-added-dyna –

@KevinB Достаточно честный. – ScottD

Возможный дубликат [угловой ng-bind-html-небезопасный и директива внутри него] (http://stackoverflow.com/questions/17417607/angular-ng-bind-html-unsafe-and-directive-within-it) –

Вы должны изменить свою директиву, как показано ниже.

app.directive('compile', ['$compile', function ($compile) { 
    return function (scope, element, attrs) { 
     scope.$watch(
     function (scope) { 
      return scope.$eval(attrs.compile); 
     }, 
     function (value) { 
      element.html(value); 
      $compile(element.contents())(scope); 
     } 
    ); 
    }; 
}]);

затем используйте его в html, как это.

<h3>Dynamic Example</h3> 
<div ng-repeat="item in dynamic"> 
    <span compile="item"></span> 
</div>

Demo code

источник

2014-10-21 00:53:56 Seminda

AngularJS: Использование директив в динамическом HTML

ответ

Смежные вопросы