Develop Reference

When html page loads first time ion-slide-box not works

My ion-slide-box not works when the page loads. If i refresh the page then its works properly. I'm refer some links but can't solve this solve this issue. Please help me on this.
My html code.
<ion-view view-title="" hide-back-button="true">
<ion-content class="padding" style="top: 48px;" ng-show="viewEntered">
<ion-item ng-show="emptyCategory">
<h2 style="text-align:center; font-weight:bold; white-space:normal;">No category found.</h2>
</ion-item>
<div class="row" ng-repeat="categoryDetail in categoryDetailList">
<div class="col card" style="margin-bottom:5px;margin-top:5px;" ng-if="categoryDetail.token==1">
<div class="row no-padding">
<div class="col col-33 no-padding"><img ng-src={{categoryDetail.image}} height="110px;" width="100%;"> </div>
<div class="col col-67 no-padding-top">
<div class="row responsive-md no-padding-top" style="margin:0;">
<div class="col no-padding" style="margin: 0;">{{categoryDetail.title}}</div>
<div class="col no-padding" style="margin: 0;"><i class="icon ion-android-call"></i> <span class="text-color-gray keyword-result-content"> {{categoryDetail.phoneNo}} </span></div>
<div class="col no-padding" style="margin: 0;"><i class="icon ion-android-mail"></i> <span class="text-color-gray keyword-result-content"> {{categoryDetail.email}} </span></div>
<div class="col no-padding" style="margin: 0;"><i class="icon ion-location"></i> <span class="text-color-gray keyword-result-content"> {{categoryDetail.location_name}} </span></div>
<div class="col no-padding" style="margin: 0;"><i class="icon ion-ios-world-outline"></i> <span class="text-color-gray keyword-result-content"> {{categoryDetail.website}} </span></div>
</div>
</div>
</div>
<div ng-if="categoryDetail.paidStatus == 1" class="col" style="margin: 0;text-align: right;border-top:1px solid #AFAFAF;">
<button class="button button-small icon-right ion-android-arrow-dropright-circle button-dark" ng-click="getcategoryDeail(categoryDetail.id)">
View Details
</button>
</div>
</div>
</div>
<div class="row" style="margin-top: 15px;">
<ion-slide-box does-continue="true" auto-play="true" slide-interval="2000" on-slide-changed="slideHasChanged($index)">
<ion-slide ng-repeat="advertise in advertiseDetailList" >
<div ng-class="getRandomColor(advertise.profileId)" ui-sref="app.categoryDetail({detailsId: advertise.profileId})">
<img ng-src="{{advertise.image}}" width="100%" height="125px" />
</div>
</ion-slide>
</ion-slide-box>
</div>
</ion-content>
</ion-view>
My controller code :
.controller('CategoryIdDetailController', function($timeout, $scope, $http, $state, baseUrl, $ionicLoading, $stateParams, $ionicBackdrop, $ionicModal, $ionicSlideBoxDelegate, $ionicScrollDelegate) {
$scope.$on("$ionicView.enter", function () {
$scope.viewEntered = true;
});
$scope.$on("$ionicView.beforeLeave", function () {
$scope.viewEntered = false;
});
$ionicLoading.show({
template: '<ion-spinner icon="spiral"></ion-spinner>'
});
$scope.advertiseDetailList = [];
$http({
method : "GET",
url : baseUrl+"category_id="+$stateParams.categoryId+"&methodName=category.detailList"
}).then(function mySucces(response) {
if(response.data.responseMsg.resultLength == 0) {
$ionicLoading.hide();
$scope.categoryDetailList = response.data.responseMsg.category;
$scope.emptyCategory = true;
} else {
$ionicLoading.hide();
$scope.categoryDetailList = response.data.responseMsg.category;
//$scope.advertiseDetailList = response.data.responseMsg.advertise;
$scope.$watch('learnSpeed', function (newValue, oldValue) {
$ionicSlideBoxDelegate.update();
});
angular.forEach(response.data.responseMsg.advertise, function(value, key) {
$scope.advertiseDetailList.push({'image': value.image});
})
$scope.emptyCategory = false;
}
});
$scope.getcategoryDeail = function(detailsId) {
$state.go('app.categoryDetail',{detailsId:detailsId});
}
})
Server response :
"responseMsg": {
-
"0": {
"id": 1,
"imgContent": "images/1.jpeg",
"profileId": 9,
"image": "http://localhost/helloKasaragodApi/static/images/1.jpeg"
},
-
"1": {
"id": 2,
"imgContent": "images/2.jpeg",
"profileId": 16,
"image": "http://localhost/helloKasaragodApi/static/images/2.jpeg"
},
-
"2": {
"id": 3,
"imgContent": "images/3.jpeg",
"profileId": 33,
"image": "http://localhost/helloKasaragodApi/static/images/3.jpeg"
}
},

After you get the data from the server and add it to the variable you want use $scope.$apply(); to update the $scope variables on the page.

You can use ion-slides like following way:
<ion-slide ng-repeat="artist in data.random_artists">
<div class="box">
{{artist.title}}
</div>
</ion-slide>
.controller('HomeCtrl', function($scope, $stateParams, $ionicSlideBoxDelegate, DataHandler) {
$scope.data.random_artists = DataHandler.GetRandomArtists(3);
setTimeout(function(){
$ionicSlideBoxDelegate.update();
},5000);
}
Ref: https://forum.ionicframework.com/t/slides-generated-with-ng-repeat-causing-issues-slide-box/394/15

ng-src not resolving image path stored in MongoDB

This is my code in my view
<div ng-controller="HomeController">
<div class="row">
<div class="col-xs-12 col-sm-offset-1 col-sm-3">
<div class="media">
<div class="media-top media-middle">
<a ui-sref="#">
<img class="media-object img-thumbnail" ng-src="{{dish.image}}" alt="MENU" >
</a>
<div class="media-body">
<h2 class="media-heading" style="color:red">This is Hot/Featured</h2>
</div>
</div>
</div>
</div>
</div>
This is my controller
.controller('HomeController', ['$scope', 'menuFactory', function($scope, menuFactory) {
menuFactory.getDishes().query(
function(response) {
var dishes = response;
$scope.dish= dishes[0];
},
function(response) {
$scope.message='Error' + response.status+ " " + response.statusText;
});
}])
.controller('HomeController', ['$scope', 'menuFactory', function($scope, menuFactory) {
menuFactory.getDishes().query(
function(response) {
var dishes = response;
$scope.dish= dishes[0];
},
function(response) {
$scope.message='Error' + response.status+ " " + response.statusText;
});
}])
This is my Service.js code
.service('menuFactory', [/*'$http'*/ '$resource', 'baseURL', function(/*$http*/ $resource, baseURL) {
this.getDishes = function(){
return $resource(baseURL+"dishes",null, {'get':{method:'GET' }}); //$http.get(baseURL+"dishes");
};
}])
I have checked the path, it does exist. When I give the path directly, the image is displayed. When the above code is used, it is not. When I check in console, ng-src keyword itself doesn't get displayed. But the same code works in other machine which is my laptop. I think there is some dependency issue. Please help.

ng-repat not working in ng-include angular js?

So just to explain, a little bit closer.
I have 3 controllers, each has a different purpose, in ng-route.
But when I ng-include file in the template file, the second controller's ng-repeat is not working,
on the #/footer with a route. But on the #/nemke everything is working fine.
I know it's confusing. Thanks in advance.
#/footer template
<div class="container fluid bigCont" >
<div id="muster">
<span id="left"></span>
<span id="right"></span>
<ul class="slide">
<li id="{{image.id}}" class="slides" ng-repeat="image in images" ng-style="{'background-image': 'url(images/' + image.image + ')'}" >
<div class="absolute">
<h2 class="duka">{{image.text}}</h2>
<p>{{image.text2}}</p>
<button class="main-but" >More</button>
</div>
<span class="closer">X</span>
<span ng-click ="editor()" class="glyphicon glyphicon glyphicon-pencil pencer" aria-hidden="true"></span>
</li>
</ul>
</div>
<div ng-include="'good.html'"></div> the controller for this tempalte doesen't work goodCtrl
#/nemke template
<h1>{{name}}</h1>
<h1 id="number" ng-click="getNumber(1)">0</h1>
<form name="myForm" ng-if="bool" ng-model="formModel">
<input type="text" ng-model="formModel.text" id="text" name="text" required/>
<button ng-disabled="myForm.$invalid" ng-click="addNew()">Add new text</button>
</form>
<button ng-click="boolke=true">Fade in</button>
<button ng-click="boolke=false">Fade Out</button>
<p ng-if="boolke" ng-click="deletRec($event)" class="del_id sade" id="{{user.id}}" ng-repeat = "user in users">{{user.text}}</p>
<p>{{name}}</p>
controller for nemke template
app.controller('goodCtrl', ['$scope','$http','$controller', 'images', function($scope,$http,$controller, images){
$controller('getCtrl',{$scope:$scope});
$scope.name = "Nikson";
document.getElementById('title').style.display = "none";
images.success(function(data){
$scope.users = data;
});
$scope.formModel = {};
$scope.addNew = function() {
$scope.users.push($scope.formModel);
/*$http.post('post.php', $scope.formModel).
success(function(data){
console.log("ok")
}).error(function(data){
console.log("err");
}); */
$scope.formModel = {};
};
$scope.deletRec = function(event) {
var id = event.target.id;
$http({
method: 'DELETE',
url: 'delete.php',
data: {
id: id
},
headers: {
'Content-type': 'application/json;charset=utf-8'
}
})
.then(function(response) {
console.log(response.data);
}, function(rejection) {
console.log(rejection.data);
});
event.target.style.display = "none";
}
$scope.care = [
{
name:"Nemke",
age:12,
},
{
name:"Uros",
age:13,
}
]
}]);
routing js
app.config(function($routeProvider) {
$routeProvider
.when("/",{
controller:"newCtrl",
templateUrl:"main.html",
})
.when("/footer",{
controller: "getCtrl",
templateUrl : "red.html",
})
.when("/nemke",{
controller: "goodCtrl",
templateUrl:"good.html",
})
.otherwise({
redirectTo:"/"
})
});
main js
app.controller('getCtrl',['$scope', '$http', '$routeParams', 'images', function($scope, $http, $routeParams, images) {
images.success(function(data){
console.log(data);
}]);

Angular directive stops working after being moved from one DOM element to another

I have a modal service in my app that opens/closes a modal. When the modal is opened, it plucks its content from the div with the specified id, which always sits inside a container elem that is hidden. Normally this works fine.
The problem I'm having now is that when a user opens the modal with the mediaBrowser directive for the first time, they can navigate between the photos/videos tab and select an item to attach to a post. If the modal is closed and reopened though, nothing works. The photos load as expected, but clicking one does nothing. It's as if none of the functions in the mediaBrowser or mediaBrowserPhotos directive work.
I thought it might have something to do with needing to compile the directive after its moved from one DOM element to another, but I've not had much luck resolving it with the $compile service.
Here is my modal service:
app.service('modal', [function() {
var modal = this;
modal.settings = {};
modal.overlay = $('<div id="overlay"></div>');
modal.modal = $('<div id="modal"></div>');
modal.content = $('<div id="content"></div>');
modal.closeBtn = $('<div id="close"><i class="fa fa-times"></div>');
modal.modal.hide();
modal.overlay.hide();
modal.modal.append(modal.content, modal.closeBtn);
$(document).ready(function(){
$('body').append(modal.overlay, modal.modal);
});
modal.open = function (settings) {
modal.settings = settings;
var content = modal.settings.content;
modal.content.empty().append(content);
if(modal.settings.class) modal.modal.addClass(modal.settings.class);
if(modal.settings.height) modal.modal.css({ height: settings.height });
if(modal.settings.width) modal.modal.css({ width: settings.width });
if(modal.settings.content_height) modal.modal.css({ height: settings.content_height });
if(modal.settings.content_width) modal.modal.css({ width: settings.content_width });
if(modal.settings.fitToWindow) {
modal.settings.width = $(window).width() - 160;
modal.settings.height = $(window).height() - 160;
};
center(modal.settings.top);
$(window).bind('resize.modal', center);
modal.modal.show();
modal.overlay.show();
$(modal.closeBtn).add(modal.overlay).on('click', function(e) {
e.stopPropagation();
modal.close();
});
$(document).on('keyup', function(e) {
if (e.keyCode == 27) {
modal.close();
$(document).unbind('keyup');
}
})
};
modal.close = function() {
var elem = modal.settings.elem;
var content = modal.settings.content;
elem.empty().append(content);
modal.modal.hide();
modal.overlay.hide();
modal.content.empty();
$(window).unbind('resize.modal');
};
function center(top) {
if(!top || !isInt(top)) top = 130;
var mLeft = -1 * modal.modal.width() / 2;
modal.modal.css({
top: top + 'px',
left: '50%',
marginLeft: mLeft
});
function isInt(n) {
return n % 1 === 0;
}
}
}]);
I also have a mediaBrowser directive in my app, which housed 2 child directives representing a photos and videos tab. Here is my mediaBrowser directive:
app.directive('mediaBrowser', ['$rootScope', 'profileAPI', 'photosAPI', 'videosAPI', function($rootScope, profileAPI, photosAPI, videosAPI) {
return {
replace: true,
templateUrl: '/assets/employers/media_browser.html',
scope: {
model: '=',
card: '=',
type: '=',
photoContainer: '=',
videoContainer: '=',
mediaBrowserContainer: '=',
mediaBrowserForm: '='
}, controller: ['$scope', '$rootScope', 'profileAPI', 'photosAPI', 'videosAPI', function($scope, $rootScope, profileAPI, photosAPI, videosAPI) {
$scope.mediaView = profileAPI.mediaView;
resize($scope.mediaView);
$rootScope.$on('mService:keyChanged', function resultsUpdated(event, value) {
$scope.mediaView = profileAPI.mediaView;
resize($scope.mediaView);
});
$scope.setMediaView = function(view) {
profileAPI.mediaView = view;
};
function resize(resource) {
if(resource === 'photos') {
photosAPI.resizeColumns('#media_browser_photos_new_' + $scope.type);
} else if (resource === 'videos') {
videosAPI.resizeColumns('#media_browser_videos_new_' + $scope.type);
}
}
}]
}
}]);
Here is the partial for the mediaBrowser directive:
<div style="display:none" id="{{mediaBrowserContainer}}">
<div id="{{mediaBrowserForm}}">
<div class="row">
<div class="col-lg-12">
<div class="row subheader modal-tabs">
<ul class="nav navbar-nav">
<li ng-class="{'active-sub': mediaView === 'photos'}">
<a ng-click="setMediaView('photos');">Photos</a>
</li>
<li ng-class="{'active-sub': mediaView === 'videos'}">
<a ng-click="setMediaView('videos');">Videos</a>
</li>
</ul>
</div>
</div>
</div>
<div class="row" ng-if="mediaView === 'photos'">
<div media-browser-photos
model="model"
container="photoContainer"
media-browser-container="mediaBrowserContainer"
media-browser-form="mediaBrowserForm"
for-type="type"
mode="'new'">
</div>
</div>
<div class="row" ng-if="mediaView === 'videos'">
<div media-browser-videos
model="model"
container="videoContainer"
media-browser-container="mediaBrowserContainer"
media-browser-form="mediaBrowser"
for-type="type"
mode="'new'">
</div>
</div>
</div>
</div>
Here is my mediaBrowserPhotos directive. Note that the videos version is basically identical to photos:
app.directive('mediaBrowserPhotos', ['$rootScope', '$timeout', '$q', 'photosAPI', 'modal', function($rootScope, $timeout, $q, photosAPI, modal) {
return {
replace: true,
templateUrl: '/assets/employers/media_browser_photos.html',
scope: {
container: '=',
model: '=',
mediaBrowserContainer: '=',
mediaBrowserForm: '=',
forType: '=',
mode: '='
}, controller: ['$scope', '$rootScope', '$timeout', '$q', 'photosAPI', 'modal', function($scope, $rootScope, $timeout, $q, photosAPI, modal) {
$scope.current_page = photosAPI.current_page;
$scope.results = [];
$scope.loading = false;
$scope.num_pages = 0;
$scope.page_numbers = photosAPI.page_numbers;
$scope.total_count = 0;
$scope.count = 0;
$scope.order = false;
var thumbSize = 150;
var q = $scope.current_page;
$rootScope.$on('cService:keyChanged', function resultsUpdated(event, value) {
$scope.results = photosAPI.results;
$scope.loading = photosAPI.loading;
$scope.num_pages = photosAPI.num_pages;
$scope.page_numbers = photosAPI.page_numbers;
$scope.total_count = photosAPI.total_count;
});
$scope.selectMedia = function(options) {
if($scope.mode === 'new') {
var content = '#add_card_form';
var elem = '#add_card_form_container';
} else {
var content = '#' + $scope.forType + '_' + $scope.model.id + '_form';
var elem = '#' + $scope.forType + '_' + $scope.model.id + '_form_container';
};
$scope.model[options.type] = options.object;
modal.close();
modal.open({
content: $(content),
elem: $(elem),
height: '594px',
content_height: '578px'
})
}
}]
}
}]);
Here is the partial for mediaBrowserPhotos:
<div class="column-layout cols-3 search-results-no-resize" id="{{container}}">
<div class="multiple-photo-upload media">
<button type="button" class="btn btn-default dropdown-toggle" ng-click="orderAsc();">
Sort by Date
Oldest First <i class="fa fa-arrow-up" style="font-size: 1.3em;"></i>
Newest First <i class="fa fa-arrow-down" style="font-size: 1.3em;"></i>
</button>
<div class="paginator" ng-if="page_numbers.length > 1">
<div class="page-btn prv" ng-click="prevPage()"><i class="fa fa-chevron-left"></i></div>
<div class="page-btn" ng-repeat="p in page_numbers" ng-class="{'current':p === current_page}" ng-click="loadPage(p)">{{p}}</div>
<div class="page-btn nxt" ng-click="nextPage()"><i class="fa fa-chevron-right"></i></div>
</div>
</div>
<div class="results-label media"><b>{{total_count}}</b> <span ng-if="total_count == 1">Photo</span><span ng-if="total_count != 1">Photos</span></div>
<div class="media-browser photos" ng-show="!loading && total_count > 0">
<div class="col">
<div ng-repeat="r in results" class="card result-link">
<div class="content result">
<div class="image-container" ng-style="{'background-image': 'url(' + r.image_url + ')'}" ng-click="$parent.selectMedia({object: r, type: 'image'})"></div>
</div>
</div>
</div>
<div class="col" style="display:none"></div>
<div class="col" style="display:none"></div>
<div class="col" style="display:none"></div>
<div class="col" style="display:none"></div>
<div class="col" style="display:none"></div>
<div class="col" style="display:none"></div>
<div class="col" style="display:none"></div>
<div class="col" style="display:none"></div>
<div class="col" style="display:none"></div>
<div class="col" style="display:none"></div>
<div class="col" style="display:none"></div>
<br style="clear:both" />
</div>
<div ng-show="loading" class="loading-results">
<i class="fa fa-spinner fa-spin"></i>
</div>
</div>
The whole app itself is pretty complex and difficult to reproduce in a Plucker/Fiddle. Any help would be greatly appreciated. Let me know of you need any additional code from the app!

Try this: instead of moving the whole thing, wrap it in another element, leave that one in place and move the same element you were moving now (now the child of the element in your link function).
If you don't use replace:true, which is deprecated anyway, you get that element for free (the directive's element).
Good luck!

ionic : inherit content from master to child

I am trying to inherit the blog contents from blog.html(list of cards) to news.html(single card) . I cant seem to get it working. Here is my config :
app.js
.controller('BlogCtrl', function($scope, $state, Posts) {
$scope.blogs = [];
Posts.success(function(response) {
var posts = response;
$scope.blogs = posts;
})
.state('app.news', {
url: "/news/:index",
views: {
'menuContent': {
templateUrl: "templates/news.html"
}
}})
BlogCtrl.js
$scope.monitor = function(index){
$state.go('app.news',{ index: index });
};
blog.html
<div ng-controller="BlogCtrl">
<div ng-repeat="blog in blogs | orderBy:'-created_at'" ng-click="monitor($index)">
<h4 class="title">{{blog.title}} </h4>
</div>
</div>
news.html
<ion-view view-title="{{blog.title}}">
<ion-content>
<div class="list card">
<div class="item">
<h3 ng-bind="{{blog.title}}"></h3>
<p ng-bind="{{blog.created_at}}"></p>
</div>
<div class="item item-body">
<img class="full-image" ng-src="{{blog.img}}">
<div ng-bind="{{blog.text}}"></div>
</div>
</div>
</ion-content>
</ion-view>