custom $ compile директива применяется только иногда в том же объеме

спасибо за просмотр. Я нырять прямо в:

JSON объект имеет HTML ссылки с ng-click атрибутами, используя ng-bind-html с $sce «s trustAsHtml, чтобы сделать HTML безопасным. Я также использовал настраиваемую директиву angular-compile, чтобы скомпилировать в приложении приложение углового клика после того, как json загрузится в обещание $q.

Все это работает, как предполагалось, на первый взгляд ...

JSON

{ 
"text" : "Sample of text with <a data-ng-click=\"__services._animation.openModal('g');\">modal trigger</a>?" 
}

VIEW

<p data-ng-bind-html="__services.trustAsHTML(__data.steps[step.text])" 
data-angular-compile></p>

ДИРЕКТИВА

angular.module('app.directives.AngularCompile', [], ["$compileProvider", function($compileProvider) { 
    $compileProvider.directive('angularCompile', ["$compile", function($compile) { 
     return function(scope, element, attrs) { 
      scope.$watch(
       function(scope) { 
        return scope.$eval(attrs.angularCompile); 
       }, 
       function(value) { 
        element.html(value); 
        $compile(element.contents())(scope); 
       } 
      ); 
     }; 
    }]) 
}]);

выпуска:

Хорошо, так это работает. Мое приложение загружается, оно служит безопасному HTML, а мой ng-click открывает модальный, передавая его параметры. Я вижу class='ng-binding' на окружающем p тег, class="ng-scope" на теге a в сгенерированном html. Ура!

Следующий порядок ведения бизнеса состоит в том, чтобы записать эти данные в другую модель, отслеживающую прогресс, и запустить ее через те же самые ng-bind, trustAsHTML, angular-compile treatment на другом экране. Просто копирование данных в отдельный объект.

Вот где это не удается!

<p data-ng-bind-html="__services.trustAsHTML(__state.modal.text)" 
data-angular-compile></p>

Во второй точки зрения, которая является модальным в той же области ($ rootScope) на той же странице - время связывания, и trustAsHTML Угловое применяется. Но ссылка не доступна для кликов, и на теге a не создается class="ng-scope".

Если дальнейшее объяснение моей настройки может помочь понять проблему, позвольте мне подробно рассказать об этом здесь. Все начальное приложение настраивается консьержем и хранить большинство данных в $ rootScope:

return angular 
     .module('app', [ 
     'ngResource', 
     'ngSanitize', 
     'ui.router', 
     'oslerApp.controllers.GuideController', 
     'oslerApp.services.ConciergeService', 
     'oslerApp.services.DataService', 
     'oslerApp.services.LocationService', 
     'oslerApp.services.StatesService', 
     'oslerApp.directives.AngularCompile', 

    ]) 
    .config(function($stateProvider, $urlRouterProvider) { 
     // For any unmatched url, redirect to landing 
     $urlRouterProvider.otherwise("/"); 

     // Now set up the states 
     $stateProvider 
     .state('guide', { 
      url: "/guide", 
      templateUrl: "views/guide.html", 
      controller: 'GuideController as guide' 
     }) 
     .state('contact', { 
      url: "/contact", 
      templateUrl: "views/contact.html" 
     }) 
    }) 
    .run(function(ConciergeService) { 
     ConciergeService.init(); 
    });

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

источник

2016-04-11 vars

Урок: Если вам нужно реорганизовать все и по-прежнему не делать успехов, вы делаете это неправильно.

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

 compiler: function(element, template, content, scope) { 
      element = $(element); 
      template = template[0] + content + template[1]; 
      var linkFn = $compile(template); 
      content = linkFn(scope); 

      element.replaceWith(content); 
     },

источник

2016-04-14 15:44:25 vars

custom $ compile директива применяется только иногда в том же объеме

ответ

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