0

I am searching SoundCloud's API and want to be able to add a song to the page once it is clicked from the search results. I am using Plangular and need to also append the tags for that. However, jQuery doesn't seem to like including Angular tags in the append function.

Here is the 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>"
                    )
                }
            })

I am new to Angular, so I'm sure there is a better way to do this. Any help is greatly appreciated!

user3456553
  • 35
  • 3

2 Answers2

2

If you are using Angular, you shouldn't be using jQuery for the ajax calls. I'd suggest you first learn more about the declarative way Angular works, instead of the imperative way jQuery works. Basically you don't modify elements from the controller directly. What you could do is make an array of posts in a controller: $scope.posts. Then you make an ajax call with $http, and in the callback you add the retrieved post to the $scope.posts e.g. $scope.posts.push(response). In your HTML you do something like this:

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

The post in posts will bind to $scope.posts, and by using the ng-repeat the tags (like plangular) get compiled automatically.

In fact, I barely use jQuery in my apps and I can't even remember giving a div an id. I'd suggest you to follow a good tutorial first and check out this: "Thinking in AngularJS" if I have a jQuery background?

Community
  • 1
  • 1
hansottowirtz
  • 664
  • 1
  • 6
  • 16
0

This is not the correct way to append Angular's model values.

You can directly access model values like this. Give it try!

$scope[model_name]
Wandering Fool
  • 2,170
  • 3
  • 18
  • 48
Shoaib Ahmed
  • 747
  • 12
  • 28