如何在jQuery代码中使用角度变量

Question

我有一个使用 angular 生成名称列表的输入，我希望每个名称都是一个链接，该链接以名称作为输入值提交表单。

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

或者，如果您想以 Angular 方式解决此问题，请执行以下操作：

在您的控制器 (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');
                });
            });
        }
    };
});