0

This is probably a basic question but I'm relatively new to JS. I have a div that is rendered in jQuery:

$('.bscroll').after('<h1>{{{selected.name}}}</h1>');

And then I have some data I am getting from Angular:

    var phonecatApp = angular.module('phonecatApp', []);

phonecatApp.controller('PhoneListCtrl', function ($scope) {

    $scope.select = function(artist) {
        $scope.selected = artist;
    };
    $scope.list = [{
        name: "Beatles",
        songs: ["Yellow Submarine", "Helter Skelter", "Lucy in the Sky with Diamonds"]
    }, {
        name: "Rolling Stones",
        songs: ["Ruby Tuesday", "Satisfaction", "Jumpin' Jack Flash"]
  }];
});

However this ends up displaying as {{selected.name}} Is there a way to escape this in jQuery to allow the Angular data to display correctly?

Auzy
  • 2,135
  • 2
  • 25
  • 35
  • 1
    That's... not really the recommended way to use angular. It's perfectly capable of putting html into a view - there's no need to use jQuery to do that. – Dave Feb 16 '16 at 17:27
  • don't use jQuery to insert elements...let angular build the dom for you based on your data models. You can't insert directives without using `$compile` – charlietfl Feb 16 '16 at 17:28
  • see this answer http://stackoverflow.com/questions/11771513/angularjs-jquery-how-to-get-dynamic-content-working-in-angularjs – zoom Feb 16 '16 at 17:29
  • @zoom OP probably has no need to use jQuery in the first place, that answer is not a good indication of the best way to handle this – charlietfl Feb 16 '16 at 17:34
  • Thanks all, unfortunately the jQuery is already heavily used on the website I was contracted to fix, as was the Angular. I understand this is far from ideal but I actually think Zoom's answer will help solve the strange situation I am in. But yes Charlietfl, I agree, it is far from the best way to handle it ideally. – Auzy Feb 16 '16 at 17:37
  • @charlietfl is there a way that I can mark your 1st comment as answer? I think it covers the ideal way as well as a temporary fix since you mentioned the $compile. – Auzy Feb 16 '16 at 17:39
  • but there is probably no reason for you to use jQuery for this at all. I won't answer that way because you should be looking to use angular best practices first. What is the use case? where are you calling that jQuery from? Show more code – charlietfl Feb 16 '16 at 17:43
  • @charlietfl The existing website uses a jquery plugin to accomplish a very important feature of the website. Could it be rebuilt in Angular? I'm sure. But the jQuery plugin is a couple hundred lines long. I do not have allowed time or scope to make that all Angular compliant unfortunately. Far from ideal, but this is a small feature they want while the website is in the process of being rebuilt the *right* way. – Auzy Feb 16 '16 at 17:48
  • OK... reasonable valid case but why can't plugin update scope model? That would be the more common approach. Whatever event is used to do that append could be used to update model – charlietfl Feb 16 '16 at 17:52
  • @charlietfl, You are definitely on a higher level of understanding than I am when it comes to this, but I think I get what you meant in your last comment and yes, I think it is both possible and the best way to handle this. Thank you. Feel free to offer up that comment as an answer and I'll gladly mark it correct. – Auzy Feb 16 '16 at 18:09
  • It's just how you need to think in angular... always think of the data model first... then let angular create the DOM from that data model. Note that events outside of angular that update models need to notify angular to run another digest so view gets rendered with updates – charlietfl Feb 16 '16 at 18:11

0 Answers0