2015-11-30 3 views
0

Я ищу руководство по лучшим практикам, как взять HTML-код, который поступает из JSON, и запускать модальный/переключатель при нажатии.Как заставить выражение, переданное из JSON в угловую область?

JSON имеет 100 записей, около 10 содержит ссылки, которые вызывают всплывающее окно. Они появляются в тексте как «Расписание #» (где # - A - G).

Мой первый подход просто написать Угловое наценку в формате JSON, и он оказывается в сферу:

В из JSON:

"Are the details defined in 
<a href='/#/' class='schedule' 
    data-ng-click='modal.active = modal.active === true ? false : true'> 
     Schedule G 
</a>?" 

Очевидно - это не работает потому что угловой не знает о ng-click OR modal. $ sce делает свою работу для trustAsHTML - но я ничего не могу найти, узнаю выражение.

Есть ли я на правильном пути?

Я прокручиваю документацию $ apply, $ compile и $ parse, но никому из этого не кажется, что я делаю.

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

+1

Если вы хотите поставить угловой синтаксис в JSON, компиляция $ - это правильный путь, хотя это уродливое решение. Вместо этого вы просто разбираете JSON как часть ng-repeat, помещая элементы по мере необходимости в свой html. См. Http://stackoverflow.com/questions/16485274/using-ng-repeat-on-json-containing-json –

+0

Вы можете указать здесь свой код? – roshini

+0

@JamesGentes Спасибо за это. Я использую ng-repeat для общей модели, но у этого одного дочернего объекта есть среднее предложение ссылки, которое должно читать существующие $ scope. Можете ли вы объяснить, почему это уродливое решение - кроме, это ЧУВСТВИТЕЛЬНО некрасиво? Что он делает. Как я могу использовать ng-repeat таким образом? – vars

ответ

0

HTML

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

COMPILE ДИРЕКТИВА

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

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

0

Хотя я не полностью решил эту проблему, я знаю, что ответ на вопрос о направлении прочно компилируется. Я нашел this great blog post об этом, который был вдохновлен аналогичным вопросом StackOverflow ... на который ссылается в сообщении.

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