Как использовать угловую переменную в коде jQuery

Question

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

<form method="POST" action="/results/" id="artform> 
{% csrf_token %} 
    Search:<input type="text" name="search" ng-model="search" /> 
      <input type="submit" value="Submit" /> 
</form> 
<table ng-controller="mycontroller"> 
    <tr ng-repeat="artist in artists | filter:search | limitTo:10"> 
     <td ng-hide="!search"> 
      <a class="click-me" href="javascript:$('#artform').submit();"> 
       {({ artist })} 
      </a> 
     </td> 
    </tr> 
</table> 

<script> 
    (function ($){ 
    $(function() { 
     $('body').delegate('.click-me', 'click', function(){ 
      $('input[name="search"]').val({({ artist })}); 
     }); 
    }); 
})(jQuery);  
</script> 

.val({({ artist })});, где я хочу, чтобы ввести независимо от значения {({ artist })} это, так как я хочу ссылку отправить форму с именем в качестве значения. Как я могу получить угловую переменную в jquery?

Answer 1

попробовать

$('body').delegate('.click-me', 'click', function(){ 
      var artist = $(this).text(); 
      $('input[name="search"]').val(artist); 
}); 

Answer 2

Там нет простого способа достижения этой цели.

Однако в вашем случае, вы можете легко использовать:

$('input[name="search"]').val($(this).text()); 

Answer 3

Вы объединяете две технологии, которые на самом деле не совместимы. Было бы лучше, если бы вы решили использовать только AngularJS на своем сайте или только JQuery.

Но чтобы ответить на ваш вопрос в JQuery, если вы хотите, чтобы значение быть текст якоря:

$('body').delegate('.click-me', 'click', function(){ 
      $('input[name="search"]').val($(this).text()); 
     }); 

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

Создайте метод в контроллере (mycontroller) с именем clickMe и привяжите значение привязки к текстовому полю поиска. Вам нужно будет переместить контроллер в свой код, чтобы поле поиска и таблица были частью одного и того же контроллера.

<div ng-controller="mycontroller"> 
<form method="POST" action="/results/" submit-on="clickMeEvent"> 
{% csrf_token %} 
    Search:<input type="text" name="search" ng-model="search" /> 
      <input type="submit" value="Submit" /> 
</form> 
<table > 
    <tr ng-repeat="artist in artists | filter:search | limitTo:10"> 
     <td ng-hide="!search"> 
      <a ng-click="clickMe(artist)"> 
       {({ artist })} 
      </a> 
     </td> 
    </tr> 
</table> 
</div> 

Контроллер:

$scope.clickMe = function (artist) { 
    $scope.search = artist; 
    $scope.$broadcast('clickMeEvent'); 
}; 

Директива:

app.directive('submitOn', function() { 
    return { 
     link: function(scope, elm, attrs) { 
      scope.$on(attrs.submitOn, function() { 
       //We can't trigger submit immediately, or we get $digest already in progress error :-[ (because ng-submit does an $apply of its own) 
       setTimeout(function() { 
        elm.trigger('submit'); 
       }); 
      }); 
     } 
    }; 
});