Замена содержимого статического текста внутри ngrepeat директивой ngclick в AngularJS

Question

Я пробовал так много разных вещей здесь, не повезло. В основном у меня есть массив строк (только предложения). Мне нужно ngRepeat над ними и выводить их. Нет проблем. Но мне нужно иметь возможность найти и заменить определенную комбинацию слов («социальное обеспечение» в этом случае), обернуть ее внутри ссылки и добавить директиву ngClick к этой ссылке.

Я вполне уверен, что мне нужно использовать директиву, и это как-то связано с компиляцией и связыванием. Но Thats, насколько я могу с этим справиться. Любая помощь будет оценена по достоинству.

Answer 1

Я думаю, вы могли бы использовать что-то вроде этого: http://jsfiddle.net/DotDotDot/Z9CHL/2/
я не уверен, что это лучшая реализация, но, по крайней мере, это работает

HTML-код достаточно прост, я посылаю Обычай директиву один параметр, полное предложение

<ul ng-repeat='sentence in list'> 
     <li><span the-dir txt="sentence"></span></li> 
    </ul> 

с яваскриптом стороны, это довольно легко, но дольше:

.directive('theDir', function($compile){ 
var r=/(social security)/ig; 
return { 
    scope:{txt:'='}, 
    link:function(scope,element,attributes){ 
     scope.aFunction=function(){ 
     console.log('In the directive, you clicked on social security'); 
     } 
     if(r.test(scope.txt)) { 
      splitted=scope.txt.split(r); 
      console.log(splitted) 
      var newSpan=new angular.element('<span>'); 
      for(var i=0;i<splitted.length;i++) 
      { 
       if(r.test(splitted[i])){ 
        var newLink=new angular.element('<a>'); 
        newLink.attr('ng-click','aFunction()'); 
        newLink.addClass('social-security'); 
        newLink.html(splitted[i]); 
        newSpan.append(newLink); 
       } 
       else 
        newSpan.append(splitted[i]); 
      } 
      element.append(newSpan); 
      $compile(newSpan)(scope); 
     } 
     else 
     { 
     element.html(scope.txt); 
     } 

    } 

} 
}); 

Я использую регулярное выражение, чтобы найти все вхождения вашего предложения «социальное обеспечение», разбить полное предложение на эти вхождения, а затем заменить каждый раз словами новым угловым элементом (ссылка HTML в этом случае с ng- click). Я добавляю все регулярные слова и ссылки к исходному элементу, а затем компилирую новый слой с помощью рабочих ссылок, чтобы иметь рабочий ng-click.
И это, кажется, работает
я позволю вам копаться в коде, и я надеюсь, что это помогает вам

Веселитесь