angularjs compile json with template

Question

I am new to angularjs, and I have an jquery background.

I want to compile json from the server into an element with an template.

What I now have for so far is:

The template:

<script type="text/ng-template" id="/tiles.html">
    <div ng-repeat="tile in tiles">
       <a href="" ng-click="imageOptions.addImage()">{{tile.name}}<img ng-src="tile.src" /></a>
    </div>
</script>

The button for displaying the content:

<button ng-click="imageOptions.addFromList()">+ Add Image from list</button>

The function:

$scope.imageOptions.addFromList = function (){

    $http
        .get('/json/Tiles/get')
        .success(function(data){
            $scope.tiles = data;
            console.log(data);
        })
        .error(function(data){
            console.log("something did go wrong");
        });

        $(".prompt").html('<div ng-include src="/tiles.html"></div>');
};

The placeholder:

<div class="prompt"></div>

The placeholder will be used many times with also other content. So I can not just type the html from the .html() argument. Like this:

<div class="prompt"><div ng-include src="/tiles.html"></div></div>

When I inspect the .prompt div it will stay uncompiled

There is no need for jquery in your solution here.

Chris
– Chris

2014-07-12 16:05:09 +00:00
Commented Jul 12, 2014 at 16:05 — Chris
– Chris, Commented Jul 12, 2014 at 16:05

charlietfl · Accepted Answer · 2014-07-12 16:05:45Z

1

The first thing you should do is remove jQuery library from your app while you get familiar with angular methodology.

There is no need to use html() method when all you need to do is include your template through a variety of different ways in your html source.

If the data isn't already available for ng-repeat it will simply fail quietly and do nothing. Then when the data is available it will respond automatically.

You could simply do:

<div class="prompt" ng-include src="/tiles.html"></div>

Or you could make a simple directive that will accomplish the same thing .

app.directive('prompt', function() {
  return {
    restrict: 'C',/* use for "class" */
    templateUrl: '/tiles.html'
  }
});

edited Jul 12, 2014 at 16:05

answered Jul 12, 2014 at 14:30

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Raghavendra · Accepted Answer · 2014-07-12 14:29:24Z

0

Simply change this

<div ng-include src="/tiles.html">

to this

<div ng-include src="'/tiles.html'">

answered Jul 12, 2014 at 14:29

Raghavendra

5,4074 gold badges39 silver badges53 bronze badges

Comments

akskap · Accepted Answer · 2014-07-12 15:16:44Z

While coding your single page application in angularjs, ideally there should not be any need for you to first get a reference to an element and then perform some action on it (You may think of this as the first step of switching from a jquery background to angularjs domain).

To achieve complete separation of model, view and controller you should just define your templates and controllers accordingly. These mappings and references should be managed by angularjs on its own.

As correctly mentioned above you should not be using .html() method of jquery. If you have included jquery in your document, it will be internally used by angularjs, but, including jquery should not be mandatory for using angularjs.

ng-repeat and ng-include also create a separate scope, so you may want to take care of those as well in future.

For your query, you may reference the template by including extra quotes in ng-include as:

<div class="prompt">
        <div ng-include src="'tiles.html'"></div>
</div>

http://jsfiddle.net/PKKp8/

Collectives™ on Stack Overflow

angularjs compile json with template

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related