We Keep Coding

How to use the $compile service to include HTML data with AngularJS directives

I have a controller which is populating content to content areas using ng-repeat. The issue is that some of this content needs to come front template files and so needs to be compiled 'on the fly'. Right now I have this function dynamically adding content:
$scope.layouts = [
{ id: 'Dashboard', icon: 'dashboard', view: '/qph/views/Dashboard.php' },
{ id: 'Customers', icon: 'people', view: '/qph/views/users.php' },
{ id: 'Quotes', icon: 'format_list_bulleted', view: '/qph/views/Quotes.php' }
];
$scope.workspace = {};
var getTemplate = function(id){
var view = 'test.php';
$timeout(function() { //added timeout
if($templateCache.get(view) === undefined) {
$templateRequest(view).then(function (data) {
$scope.workspaces.forEach(function (v) {
if (v.id == id) v.content = $compile(data)($scope);
});
});
} else {
$scope.workspaces.forEach(function (v) {
if (v.id == id) v.content = $compile($templateCache.get(view))($scope);
});
}
}, 2000);
};
$scope.workspaces =
[
{ id: 1, name: "Dashboard", icon: 'dashboard', active:true }
];
getTemplate(1);
I have checked that the data variable has the html content as expected, but the compile is outputting the following:
{"0":{"jQuery331075208394539601512":{"$scope":"$SCOPE","$ngControllerController":{}}},"length":1}
Does anyone know why its not compiling the html content as expected?
Here is the template content for reference:
<div class="col-sm-6 col-sm-offset-3" ng-controller="UserController">
<div class="col-sm-6 col-sm-offset-3">
<div class="well">
<h3>Users</h3>
<button class="btn btn-primary" style="margin-bottom: 10px" ng-click="user.getUsers()">Get Users!</button>
<ul class="list-group" ng-if="user.users">
<li class="list-group-item" ng-repeat="user in user.users">
<h4>{{user.name}}</h4>
<h5>{{user.email}}</h5>
</li>
</ul>
<div class="alert alert-danger" ng-if="user.error">
<strong>There was an error: </strong> {{user.error.error}}
<br>Please go back and login again
</div>
</div>
</div>
</div>
Here is the tabs view that is to display the compiled content:
<ul class="nav nav-tabs workspace-tabs">
<li class="nav-item" ng-repeat="space in workspaces">
<a class="nav-link" data-toggle="tab" href="#workspace{{space.id}}" ng-class="(space.active == true ) ? 'active show': ''">
<span class="hidden-sm-up"><i class="material-icons md-24">{{space.icon}}</i></span>
<span class="hidden-xs-down">{{space.name}}</span>
<button ng-click="workspace.remove($index)">x</button>
</a>
</li>
</ul>
<div class="tab-content workspace-content">
<div ng-repeat="space in workspaces" id="workspace{{space.id}}" class="tab-pane fade in" ng-class="(space.active == true ) ? 'active show': ''">
{{space.content}}
</div>
</div>

The $compile service creates a jqLite object that needs to be added to the DOM with a jqLite or jQuery append() method. Using interpolation {{ }} will only render the stringified value of the jqLite object.
<div class="tab-content workspace-content">
<div ng-repeat="space in workspaces" id="workspace{{space.id}}" class="tab-pane fade in" ng-class="(space.active == true ) ? 'active show': ''">
̶{̶{̶s̶p̶a̶c̶e̶.̶c̶o̶n̶t̶e̶n̶t̶}̶}̶
<compile html="space.html"></compile>
</div>
</div>
Instead, use a custom directive to compile and append the HTML data to the DOM:
app.directive("compile", function($compile) {
return {
link: postLink,
};
function postLink(scope, elem, attrs) {
var rawHTML = scope.$eval(attrs.html)
var linkFn = $compile(rawHTML);
var $html = linkFn(scope);
elem.append($html);
}
})
For more information, see AngularJS Developer Guide - HTML Compiler.

Use a directive.
app.directive('myCustomer', function() {
return {
templateUrl: 'test.php',
controller: 'UserController'
};
})
Template cache will be managed automatically.

Add Prev/Next buttons in multiple items array in AngularJS (ngRepeat)

I want to create a multiple items slider to list some players using ng-repeat (Angular 1.6). I'd like to add a prev/next buttons in the ul>lis to access the next or previous player in the array, shifting the view item by item.
HTML----sliderdemo.html
<div ng-controller="SliderDemoCtrl">
<div class="champions-slider">
<ul class="team-members list-inline text-center" style="display:flex" >
<li ng-repeat="player in players | limitTo: 4" style="padding:10px">
<div class="img-holder">
<img ng-src="{{ player.image }}" alt="{{player.name}}" width="20px">
</div>
<strong class="name">{{ player.name }}</strong>
</li>
</ul>
Prev
Next
</div>
</div>
My controller js---slider.demo.controller.js
var myApp = angular.module('slider.demo', []);
myApp.controller('SliderDemoCtrl',['$scope',function($scope){
$scope.players = [
{
image:"http://placehold.it/500/e499e4/fff&text=1",
name: "tes 1"
},
{
image:"http://placehold.it/500/e499e4/fff&text=2",
name: "tes 2"
},
{
image: "http://placehold.it/500/e499e4/fff&text=3",
name: "tes 3"
},
{
image:"http://placehold.it/500/e499e4/fff&text=4",
name: "tes 4"
},
{
image:"http://placehold.it/500/e499e4/fff&text=5",
name: "tes 5"
},
{
image: "http://placehold.it/500/e499e4/fff&text=3",
name: "tes 6"
}
];
}]);
Here is a plunkr of the question: https://plnkr.co/edit/J7dxeMfM22ju5gpZl5ri?p=preview
Any help would be greatly appreciated.
Thx!

I think you are searching like below solution :
// Code goes here
var myApp = angular.module('slider.demo', []);
myApp.controller('SliderDemoCtrl',['$scope',function($scope){
$scope.players = [
{
image:"http://placehold.it/500/e499e4/fff&text=1",
name: "tes 1"
},
{
image:"http://placehold.it/500/e499e4/fff&text=2",
name: "tes 2"
},
{
image: "http://placehold.it/500/e499e4/fff&text=3",
name: "tes 3"
},
{
image:"http://placehold.it/500/e499e4/fff&text=4",
name: "tes 4"
},
{
image:"http://placehold.it/500/e499e4/fff&text=5",
name: "tes 5"
},
{
image: "http://placehold.it/500/e499e4/fff&text=3",
name: "tes 6"
},
];
$scope.size=0;
$scope.next=function(){
if($scope.size+4==$scope.players.length)
return;
$scope.size+=1;
}
$scope.prev=function(){
if($scope.size==0)
$scope.size=0;
else
$scope.size-=1;
}
}]);
<!doctype html>
<html ng-app="slider.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-controller="SliderDemoCtrl">
<div class="champions-slider">
<ul class="team-members list-inline text-center" style="display:flex" >
<li ng-repeat="player in players | limitTo: 4" style="padding:10px">
<div class="img-holder">
<img ng-src="{{ players[$index+val].image }}" alt="{{players[$index+val].name}}" width="20px">
</div>
<strong class="name">{{ players[$index+size].name }}</strong>
</li>
</ul>
Prev
Next
</div>
</div>
</body>
</html>

You can handle the pagination by ng-if using a $index.Just go through Plunker
$scope.pre = 0;
$scope.nex = 4;
$scope.nextItem = function(){
$scope.pre = $scope.nex;
$scope.nex = $scope.nex + 4;
}
$scope.prevItem = function(){
$scope.nex = $scope.pre
$scope.pre = $scope.pre - 4;
}

How to show ionic popup using ng-click inside ng-repeat

here's my html code.
<div class='list' ng-repeat='worker in categories' >
<br><a class="item item-thumbnail-left" ng-click="showConfirm(worker.$id)">
<img src="img/tech_support.png">
<p>{{worker.$id}}</p>
<p>Address: {{worker.Address}}</p>
<p><u>more..</u></p>
</a>
</div>
and here's my controller.js
man.controller('categoryCtrl',function($scope,$firebaseArray,
$firebaseObject,$state,$stateParams,$ionicPopup,$window,$timeout){
var category = $stateParams.categoryId;
var categoryRef = Refroot.child('Workers').child(category);
$scope.categories=$firebaseArray(categoryRef);
$scope.showConfirm= function(id){
var workerId = id;
var workRef = Refroot.child('Workers');
var lastRef = workRef.child(category).child(workerId);
$scope.workerlist = $firebaseArray(lastRef);
var confirmPopup = $ionicPopup.confirm({
title: 'Worker Profile',
});
confirmPopup.then(function(res) {
if(res) {
console.log('Sure!');
} else {
console.log('Not sure!');
}
});
console.log(workerId + '' + category + '' + lastRef);
}
});
Hope you guys could help me, it will be a great help for my thesis :)

You should be using $index as below
<div class='list' ng-repeat='worker in categories track by $index' >
<br><a class="item item-thumbnail-left" ng-click="showConfirm($index)">
<img src="img/tech_support.png">
<p>{{$index}}</p>
<p>Address: {{worker.Address}}</p>
<p><u>more..</u></p>
</a>
</div>

Angular JS ng-repeat

Working DEMO with Single List
Edit : Trying to Add Code Snippet IN JSON to Display in Front END as attached in the image.
can you please advice can we add ?
http://i.stack.imgur.com/Y2LOs.png
i have a list of data that has to be displayed in Listing, as of now i only have one object and only one li can add
can we render object in side a object just like this, i tried there is error.
"list":{
{"object":"1"},
{"object":"2"},
{"object":"3"},
{"object":"4"},
{"object":"5"}
}
JSON :
[
{
"title" : "JavaScript ?",
"description" : "Hey, here are some of the merits of javascript",
"list" : "JavaScript is very easy to implement. All you need to do is put your code in the HTML document and tell the browser that it is JavaScript.",
"uploadedDate" : "April 12 2015",
"tags" : "javascript, webdevelopment"
}
]
JS :
var app = angular.module("jsBlogApp", []);
//Menu
app.service("headerMenu", function($http, $q) {
var deferred = $q.defer();
$http.get('json/headerMenu.json').then(function(data){
deferred.resolve(data);
});
this.getMenuItems = function (){
return deferred.promise;
}
})
.controller("headerMenuCtrl", function($scope, headerMenu){
var promise = headerMenu.getMenuItems();
promise.then(function(data){
$scope.headerMenuItems = data.data;
console.log($scope.headerMenuItems);
})
})
// Secondary Menu
app.service("secondaryHeaderMenu", function($http, $q) {
var deferred = $q.defer();
$http.get('json/secondaryHeaderMenu.json').then(function(data){
deferred.resolve(data);
});
this.getSecondaryMenuItems = function (){
return deferred.promise;
}
})
.controller("SecondaryheaderMenuCtrl", function($scope, secondaryHeaderMenu){
var promise = secondaryHeaderMenu.getSecondaryMenuItems();
promise.then(function(data){
$scope.SecondaryMenuItems = data.data;
console.log($scope.SecondaryMenuItems);
})
})
app.service("jsBlogService", function($http, $q) {
var deferred = $q.defer();
$http.get('json/data.json').then(function(data){
deferred.resolve(data);
});
this.getPlayers = function (){
return deferred.promise;
}
})
.controller("jsBlogCtrl", function($scope, jsBlogService){
var promise = jsBlogService.getPlayers();
promise.then(function(data){
$scope.items = data.data;
console.log($scope.items);
})
})
HTML :
{{menu.title}}
<div class="second__header">
<div class="second__header__wrap clearfix">
<div class="js__logo__wrap">
<h1 class="js__logo">JS Developer</h1>
<div class="js__logo__subtitle">~ codeJS </div>
</div>
<div class="c2f__nav__wrap" data-ng-controller="SecondaryheaderMenuCtrl">
<ul class="c2f__nav">
<li data-ng-repeat="menu in SecondaryMenuItems">
{{menu.title}}
</li>
</ul>
</div>
</div>
</div>
</header>
<section class="c2f__content clearfix">
<div class="c2f__cont_left">
<!--content starts-->
<div class="content__wrap" data-ng-controller="jsBlogCtrl">
<div data-ng-repeat="item in items">
<h2 class="title__head"> {{ item.title }}</h2>
<p class="desc__head">{{ item.description }}</p>
<p>Listing
<ul class="data__lisitng">
<li>
<span>{{ item.list }}</span>
</li>
</ul>
</p>
<div class="code"></div>
<span class="content__added__date">
{{ item.uploadedDate }}
</span>
<span class="content__tags">
<span class="tags__links__title">Tags - </span>
<span class="tags__links__desc">{{ item.tags }}</span>
</span>
</div>
</div>
</div>
</section>
<footer>
</footer>
</div>

I finally get what you were trying:
Here is a working plunkr: https://plnkr.co/edit/8TLDTV0OtE10hITr9Vf9?p=preview
JSON
[
{
"title" : "JavaScript ?",
"description" : "Hey, here are some of the merits of javascript",
"list" : [
{
"subtitle":"subtitle1",
"message":"message1"
},
{
"subtitle":"subtitle2",
"message":"message2"
}
] ,
"uploadedDate" : "April 12 2015",
"tags" : "javascript, webdevelopment"
}
]
HTML
<div class="content__wrap" data-ng-controller="jsBlogCtrl">
<div data-ng-repeat="item in items">
<h2 class="title__head"> {{ item.title }}</h2>
<p class="desc__head">{{ item.description }}</p>
<p>Listing
</p>
<ul class="data__lisitng">
<li ng-repeat="message in item.list">
<span>{{ message.message }}</span>
</li>
</ul>
<p></p>
<div class="code"></div>
<span class="content__added__date">
{{ item.uploadedDate }}
</span>
<span class="content__tags">
<span class="tags__links__title">Tags - </span>
<span class="tags__links__desc">{{ item.tags }}</span>
</span>
</div>
</div>

At least the list should be like this instead:
"list":[
{"object":"1"},
{"object":"2"},
{"object":"3"},
{"object":"4"},
{"object":"5"}
];
I would prefer something like:
$scope.list = [
{"object":"1"},
{"object":"2"},
{"object":"3"},
{"object":"4"},
{"object":"5"}
];

use '[' instead of '{'
[
{"object":"1"},
{"object":"2"},
{"object":"3"},
{"object":"4"},
{"object":"5"}
]

"list":{
{"object":"1"},
{"object":"2"},
{"object":"3"},
{"object":"4"},
{"object":"5"}
}
is not valid. Please use a valid object/array for ng-repeat

How to force update view from directive event in Angularjs

I have a work and stuck it 2 days. Hope everyone know angularjs help me :).
I need to force a change html when have a change on model. Example:
This is html code:
<!--CAKE LIST-->
<div id="cakelist" ng-controller="CakeListCtrl">
<ul class="thumbnails cake-rack" cakes="cakes" ng-model="cakesModel">
<li class="pull-left cake-unit" ng-repeat="cake in cakes" cake="cake">
<div class="thumbnail">
<a href="{{cake.link}}">
<img ng-src="{{cake.avatar}}" alt="{{cake.title}}" class="img img-rounded img-polaroid" />
</a>
<h5 class="pull-left">
{{cake.title}}
</h5>
Shared
<div class="clearfix"></div>
<ul class="attrs unstyled">
<li>
<div class="pull-left">Mã sản phẩm</div>
<span class="pull-right">{{cake.type}}</span>
</li>
</ul>
</div>
</li>
</ul>
<input type="button" class="btn btn-primary" value="add more cake" class="cake-more" ng-click="addCake()" />
<input type="button" class="btn btn-danger" value="clear cake" class="cake-clear" ng-click="clear()" />
<img alt="Loading" src="/imagesroot/ajax-loader-1.gif" loading-stage="loadingStage" class="cake-loading"/>
</div>
now a have a menu outside of controller:
<div id="cake-catalog" class="cake-catalog">
<ul class="nav">
<li class="active">
<a cake-menu-unit href="sacmscategory50c2302b7ff0a">Nhân vật hoạt hình</a>
</li>
<li>
<a cake-menu-unit href="sacmscategory50c2308717a84">Động vật</a>
</li>
<li>
<a cake-menu-unit href="sacmscategory50c2309da00f6">Tạo hình 3D</a>
</li>
<li>
<a cake-menu-unit href="sacmscategory50c230ba08d9d">Các mẫu hình khác</a>
</li>
</ul>
</div>
I have angular module for add and clear:
var CakeList = angular.module('CakeList', ['ngResource']);
CakeList.service('CakeService', function($rootScope) {
var cakedata = [{avatar:"test", title: "test2"}];
$rootScope.loadCake = false;
var bf = function() { $rootScope.loadCake=true; };
var at = function() { $rootScope.loadCake=false; };
return {
cakes: function() {
bf();
at();
return cakedata;
},
addCake: function() {
bf();
cakedata.push(cake);
at();
},
clear: function() {
cakedata = []; console.log('clear');
}
};
});
CakeList.directive('cakeCatalog', function($rootScope, CakeService) {
var clickfn = function(e) {
e.preventDefault();
CakeService.clear();
};
var nonclickfn = function(e) {
e.preventDefault();
console.log('nonclickfn');
};
return {
restrict: "C",
link: function(scope, element, attrs) {
$rootScope.$watch('loadCake', function(newValue, oldValue) {
if (newValue===true) {
element.find('a').off('click').on('click', nonclickfn);
}
else {
element.find('a').off('click').on('click', clickfn);
}
});
}
};
But when runtime, i put click on a element of menu then the list cake not clear, even i check console.log in console box and see the cakedata really clear!. Can you help me this case ? :)

First of all, the design seems a bit weird by using everywhere $rootScope (among other things). But that's not the cause of the problem. The problem is the $watch which is not correct.
First of all, use loadCake as an object instead of a primitive type:
var loadCake = { loaded: false};
Use the objectEquality parameter in your $watch statement:
$rootScope.$watch('loadCake', function(newValue, oldValue) {
if (!newValue) return;
if (newValue.loaded === true) {
element.find('a').off('click').on('click', nonclickfn);
}
else {
element.find('a').off('click').on('click', clickfn);
}
}, true);