How to get param from one controller to another? - angularjs

My question is best explained when I straight go to the code.
HTML part:
<div class="panel panel-default post" ng-repeat="post in posts">
<div class="panel-body">
<div class="row">
<div class="col-sm-2">
<a class="post-avatar thumbnail" href="/profile#/{[ post.profileID ]}">
<div class="text-center">{[ user.fullname ]}</div>
</a>
</div>
</div>
</div>
When I click on the /profile#/{[ post.profileID ]} link - it takes me to the profile page. All good here.
However, I am using ngView so I have separated it like this:
<div class="col-md-3">
<div>Some HTML stuff</div>
</div>
<div class="col-md-6">
<div ng-view></div>
</div>
<div class="col-md-3">
<div>Some HTML stuff</div>
</div>
My ngView makes use of the /profile#/{[ post.profileID ]} param and I use it to display whatever I have to display.
The problem:
I can get the profileID param in my angular controller but once I get it, how will I be able to pass it onto other controllers?
My controller looks like the below:
var profileApp = angular.module('profileApp', ['ngRoute']);
profileApp.config(function($routeProvider) {
$routeProvider
.when('/:id', {
templateUrl : 'partial/profile/feed.html',
controller : 'mainController'
})
.when('/posts:id', {
templateUrl : 'partial/profile/posts.html',
controller : 'postsController'
});
});
profileApp.controller('mainController', ['$scope', '$http', '$routeParams', function($scope, $routeParams){
console.log($routeParams.id);
}]);
profileApp.controller('postsController', ['$scope', '$routeParams', function($scope, $routeParams){
console.log($routeParams.id);
}]);
As you can see, I get get the param passed from the HTML link and use it in the mainController but how will I get the param to be a link in the col-md-3 (just like the original /profile#/{[ post.profileID ]})?
Hope this makes sense. It's has been driving me nuts!
Thanks

Why don't you just edit your partial HTML pages and put the columns in it.
For partial/profile/feed.html :
<div>
<div class="col-md-6">
<div>feed stuff</div>
</div>
<div class="col-md-3">
</div>
</div>
And partial/profile/posts.html could be :
<div>
<div class="col-md-6">
</div>
<div class="col-md-3">
<div>posts stuff</div>
</div>
</div>

So I did some research into this and I just ended up using services.
See below for the answer:
profileApp.service('globalParams', function() {
var profileID = '';
return {
getProfileID: function() {
return profileID;
},
setProfileID: function(value) {
profileID = value;
}
};
});
You then pass the service into the dependencies in the controllers, like below:
profileApp.controller('mainController', ['$scope', 'globalParams', function($scope, globalParams){
//some code
};
And you can call the functions for getting and setting the variables.

Related

Accessing an Api through custom directives

I am able to get only 10 objects while accessing an api and nothing through custom directive.Can anyone suggest something?
Below is the code. Can anyone help? The specialCard directive is not accessing data below.
mainView.html
<div class="panel panel-primary col-sm-offset-2 col-xs-12 col-sm-8">
<special-card></special-card>
</div>
</div>
postcard.html
<div class="post-preview" ng-repeat="book in BooksData">
<div class="panel panel-primary col-sm-offset-2 col-xs-12 col-sm-8">
<div class="panel-heading"> <h4>Book - {{book.name}}</h4></div>
<div class="panel-body">
<div>Author - <em>{{ book.authors[0] }}</em> </div>
<div>Publisher - <em>{{ book.publisher}}</em> </div>
<div>ISBN - <em>{{ book.isbn}}</em> </div>
<br>
<a class="btn btn-primary" ng-href="#/{{type}}/{{book.isbn}}"> Details</a>
</div>
</div>
</div>
</div>
app.js
var myApp = angular.module('blogApp', ['ngRoute']);
myApp.directive("specialCard",function(){
return{
restrict : "E",
templateURL : "views/post-card.html",
controller : function($scope){
}
}
});
myApp.controller('mainController',['$http','$scope',function($http,$scope) {
$http.get('https://anapioficeandfire.com/api/books').success(function(data){
$scope.BooksData= data;
console.log($scope.BooksData);
});
}]);
myApp.controller('characController',['$http','$scope',function($http,$scope) {
$http.get('https://www.anapioficeandfire.com/api/characters?page=1&pageSize=20').success(function(data1){
$scope.charData= data1;
console.log($scope.charData);
});
}]);
myApp.controller('houseController',['$http','$scope',function($http,$scope) {
$http.get('https://anapioficeandfire.com/api/houses?page=1&pageSize=20').success(function(data2){
$scope.houseData= data2;
console.log($scope.houseData);
});
}]);
Routes
myApp.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/',{
// Which controller it should use
controller : 'mainController',
// what is the alias of that controller.
controllerAs : 'main'
})
.when('/books',{
templateUrl : 'views/mainView.html',
controller : 'mainController',
controllerAs : 'main'
})
otherwise(
{
//redirectTo:'/'
template : '<h1>404 page not found</h1>'
}
);
}]);
It's impossible to help you with a such question.
Firstly, please follow the recommandations of this article: How do I ask a good question?
Then don't paste any links to GitHub repo, provide code directly in the question (and properly formatted) with some examples if you can (demo on Plunkr, Jsfiddle, etc.)

angularjs ng-repeat is not working to owl-carousel

I'm running into an issue where whenever the ng-repeat directive is applied to carousel the items are stacked vertically instead of being layout horizontally.
Screenshot for reference
After Applying ng-repeat
If I leave out ng-repeat and use static items then it works as it should.
When used static
HTML Code for ng-repeat
<section class="mp diff-types-section main-movies-position">
<div class="mp our-recommend-sec">
<div id="owl-demo2" class="owl-carousel" ng-repeat="movie in movieList">
<div class="item">
<div class="types-section">
<img class="types-section-image image-opacity" ng-src="/public/uploads/{{movie.movieId}}/backdrop.jpg" />
</div>
</div>
</div>
</div>
</section>
AngularJs Controller Code
app.controller('MainCtrl', ['$rootScope', '$scope', '$http', '$resource', '$route', '$state', '$location', 'localStorageService', function($rootScope, $scope, $http, $resource, $route, $state, $location, localStorageService) {
$rootScope.showNav = true;
$rootScope.searchBar = false;
$scope.getAllMovieList = function() {
$http.get("/api/getAllMovieList")
.then(function(response) {
$scope.movieList = response.data;
console.log($scope.movieList);
});
}
$scope.getAllMovieList();
}])
If I Keep The Static Code Like This its Working Fine with no issues
<section class="mp diff-types-section our-reccomendation-section">
<div class=" mp our-recommend-sec">
<div id="owl-demo" class="owl-carousel owl-theme">
<div class="item">
<div class="types-section">
<a ng-click="goToMovieDetail()"> <img class="types-section-image" src="../../images/92ZhAYYce2KfuLgBswzW5HCMKxr.jpg"></a>
</div>
</div>
<div class="item">
<div class="types-section" ng-click="goToMovieDetail()">
<img class="types-section-image" src="../../images/Shooter_1920x1080.jpg">
</div>
</div>
<div class="item">
<div class=" types-section" ng-click="goToMovieDetail()">
<img class="types-section-image" src="/public/uploads/ow168259/backdrop.jpg">
</div>
</div>
<div class="item">
<div class="types-section" ng-click="goToMovieDetail()">
<img class="types-section-image" src="/public/uploads/ow168259/backdrop.jpg">
</div>
</div>
</div>
</div>
</section>
Hope I get Solution For this...
Thanks in Advance.
Owl-carousel may not perfectly work with angularjs, would recommend you to use a carousel which supports angularjs, personally i use angular-ui-bootstrap, it has all components bootstrap has to offer but provides angular variants.
This solution would be helpful to you
Put owl carousel function after getting response
**use Like:**
$timeout(function(){ here your owl carousel function },10);

Where and how to inject $stateParams?

I am trying to get an image and a text into the view "home" in a Single Page Application with Angular ui-router and $stateParams.
'use strict';
angular.module('confusionApp')
.controller('IndexController', ['$scope', '$stateParams', 'menuFactory', 'corporateFactory', function($scope, $stateParams, menuFactory, corporateFactory) {
var dish = menuFactory.getDish(parseInt($stateParams.id,10));
$scope.dish = dish;
var promo = menuFactory.getPromotion(parseInt($stateParams.id,10));
$scope.promo = promo;
$scope.leader = corporateFactory.getLeader($stateParams.abbr)
}])
.controller('AboutController', ['$scope', 'corporateFactory', function($scope, corporateFactory) {
$scope.leaders = corporateFactory.getLeaders();
}])
The menuFactory service works fine in a 'MenuController' both with a list and with a parameter (injection while 'submit'). The corporateFactory works fine in a list using the 'AboutController'. But I just can't find out how to inject the $stateParam while index.html opens with the view 'home.html.
<div class="container" ng-controller="IndexController">
<div class="row row-content">
<div class="col-xs-12 col-sm-3 col-sm-push-9">
<p style="padding:20px;"></p>
<h3 align=center>Our Lipsmacking Culinary Creations</h3>
</div>
<div class="col-xs-12 col-sm-9 col-sm-pull-3">
<h4>Implement the Featured Dish Here</h4>
<div class="media">
<div class="media-left media-middle">
<a>
<img class="media-object img-thumbnail"
ng-src={{dish.image}} alt={{dish.name}}>
</a>
</div>
</div>
<div class="media-body">
<h2 class="media-heading">{{dish.name}}
<span class="label label-danger">{{dish.label}}</span>
<span class="badge">{{dish.price | currency}}</span></h2>
<p>{{dish.description}}</p>
</div>
</div>
</div>
Would anybody help me, please?
don't use $stateParams
inject $state instead and then access
$state.params.wotever
Thanks for your precious help JB Nizet and danday74!
The problem was to let the template know the properties of which dish to show. The answers I found were in controllers.js. First, I had to correct an error, and then I created a $scope.property containing only the required dish:
var up = menuFactory.detDish(0);
$scope.up = up;
Then I could use {{up.image}}, {{up.name}} etc. in the template.

angular does not load my directive

I newly start to use angular.but I have some problem to loading my directive.
I want to load my directive as soon as page loaded.
where I load data-show directive
<div class="row">
<div class="col-md-12">
<article class="row" ng-controller="DataCtrl">
<input type="button" ng-click="getDataList()" >
<h1>Some Content Here</h1>
<ul id="home" bread-crumbs></ul>
<ul class="thumbnails">
<li ng-repeat="data in list" class="col-md-5">
<show-data data="data"/>
</li>
</ul>
</article>
</div>
</div>
showData directive:
app.directive('showData', function () {
return{
restrict: 'E',
replace:true,
templateUrl: 'views/directives/datas.directive.html',
scope: {
data: "="
},
controller:'DataCtrl'
}
})
and template I used in:
<div class="well hoverwell">
<div class="row">
<h2 class="col-md-4">{{data.name}}</h2>
</div>
<div class="row">
<span class="col-md-1">Code:</span>
<span class="col-md-1">{{data.id}}</span>
</div>
<div class="row">
<span class="col-md-1">accountability:</span>
<span class="col-md-1">{{data.parent}}</span>
</div>
<div class="row">
<span class="col-md-1"> :</span>
<span class="col-md-1">{{data.definition}}</span>
</div>
</div>
and my controller
'use strict';
angular.module('app')
.controller('DataCtrl', function ($scope, DataService, $log) {
$scope.getDataList = function () {
var list = DataService.getDataList(1);
list.then(
function (result) {
$log.info(result);
$scope.dataList = result;
}, function (status) {
$log.error(status)
$scope.msg = "error " + status + " has been occur,please report to admin ";
});
};
});
and when I run my app it does not work .
when I watch it in chorome development tools my directive is comment
what is my problem.How can I call this directive as soon as page load.
thx
As you already noticed, you see empty list because your dataList in ng-repeat is not filled yet.
But you have some errors in your code:
First of all - you should never use one controller twice. So you need to create separate controller for your directive.
replace directive parameter is deprecated, better not to use it.
In your DataCtrl you set the dataList variable: $scope.dataList = result;, but in HTML you refer to list variable: <li ng-repeat="data in list" class="col-md-5">.
Maybe that example will help you to figure out with your code.

How do I target just one instance of a nested repeat?

This is probably pretty basic, but I'm going round in circles.
I have a nested controller in a ng-repeat - I would like to trigger an event in an instance of the repeat that will affect only the nested controller in that instance, not the nested controller in all instances.
Here is a basic example to try and make things clearer:
<div ng-controller="PostsCtrl">
<div ng-repeat="post in posts">
<p>{{post.body}}</p>
<div ng-controller="CommentsCtrl">
<div ng-repeat="comment in comments">
<p>{{comments.body}}</p>
<a href ng-click="showComments(post.id)">Show comments</a>
</div
</div>
</div>
</div>
angular.module('myApp')
.controller('PostsCtrl', function ($scope, Restangular) {
var posts = Restangular.all('posts');
posts.getList().then(function(posts) {
$scope.posts = posts;
});
$scope.showComments = function(id) {
$scope.$broadcast('SHOW_COMMENTS', id);
};
});
angular.module('myApp')
.controller('CommentsCtrl', function ($scope, Restangular) {
$scope.$on('SHOW_COMMENTS', function(event, id) {
var post = Restangular.one('posts', id);
post.get().then(function(post) {
$scope.comments = post.comments;
});
});
});
What would happen in this example is that all instances of the comments controller would be populated with the same comments - I just need to be able to target the relevant one. I'm sure I'm missing something pretty fundamental, and probably going about this the wrong way.
Many thanks.
You're broadcasting "SHOW_COMMENTS" to all repeated posts. You need to isolate the scope per Post.
Isolate the scope using ng-controller="PostCtrl".
<div ng-controller="PostsCtrl">
<div ng-repeat="post in posts" ng-controller="PostCtrl">
<p>{{post.body}}</p>
<div ng-controller="CommentsCtrl">
<div ng-repeat="comment in comments">
<p>{{comments.body}}</p>
<a href ng-click="showComments()">Show comments</a>
</div
</div>
</div>
</div>
Move show comments from PostsCtrl to PostCtrl.
angular.module('myApp')
.controller('PostCtrl', function ($scope) {
$scope.showComments = function() {
$scope.$broadcast('SHOW_COMMENTS', $scope.post.id);
};
});
Do you really need to use events? You could use ng-if instead.
Your comments are embedded in each Post anyway so why request them again. In this case you could do like something this...
<div ng-controller="PostsCtrl">
<div ng-repeat="post in posts" ng-controller="PostCtrl">
<p>{{post.body}}</p>
<a href ng-click="toggleComments()">Show comments</a>
<div ng-controller="CommentsCtrl" ng-if="showComments">
<div ng-repeat="comment in post.comments">
<p>{{comments.body}}</p>
</div
</div>
</div>
</div>
Toggle comments...
angular.module('myApp')
.controller('PostCtrl', function ($scope) {
$scope.showComments = false;
$scope.toggleComments = function() {
$scope.showComments = !$scope.showComments;
};
});

Resources