Question

我正在搜索SoundCloud的API，并且希望能够在从搜索结果中点击一首歌后将其添加到页面中。我正在使用Plangular并且还需要附加标签。但是，jQuery似乎不喜欢在追加函数中包含Angular标记。

以下是Search.js

$.ajax({
                type: 'POST',
                url: '/api/v1/add_song',
                data: songParams,
                success: function (newSong) {
                    $('#latest-posts').append(
                        "<div class='sc-track' plangular='"
                        + newSong.url
                        + "'><div class='pull-left'<img ng-src='{{track.artwork_url}}'></div> <h3>{{track.user.username}} - {{track.title}}</h3> <button ng-click='playPause()'>Play/Pause</button><progress ng-click='seek($event)' ng-value='currentTime / duration' > {{ currentTime / duration }} </progress> <br> <a ng-href='"
                        + newSong.url
                        + "'> View on SoundCloud </a>"
                        + "</div>"
                    )
                }
            })

我是Angular的新手，所以我确信有更好的方法可以做到这一点。非常感谢任何帮助！

Answer 1

如果您使用的是Angular，则不应将jQuery用于ajax调用。我建议你首先要了解更多关于Angular的声明方式，而不是jQuery的命令式方法。基本上，您不直接从控制器修改元素。您可以做的是在控制器中创建一系列帖子：$scope.posts。然后，您使用$http进行ajax通话，并在回调中将检索到的帖子添加到$scope.posts，例如$scope.posts.push(response)。在您的HTML中，您可以执行以下操作：

<body ng-controller="YourController">
  <div class="latest-posts">
    <div plangular="post.url" class="post" ng-repeat="post in posts">
      ...
    </div>
  </div>
</body>

post in posts将绑定到$scope.posts，并使用ng-repeat标记（如plangular）自动编译。

事实上，我在我的应用程序中几乎不使用jQuery，我甚至不记得给div一个id。我建议你先学习一个好的教程，然后看看："Thinking in AngularJS" if I have a jQuery background?

Answer 2

这不是附加Angular模型值的正确方法。

您可以直接访问此类型号值。试试吧！

$scope[model_name]

单击AJAX调用后附加AngularJS

2 个答案: