I am new in angular js.
In view i have a list of products, I have to open the detail of the product when i clicked on that. I have to pass 2 parameters to my 'productdetails' controller.
You miss use angular interpolation (double curly brackets), Also try not to have much functionality in the view code, this should be in the controller / dedicated service.
See code example below
View (html)
<a ng-click="GetLiveStatus(item)">
controller (js)
function LiveStatusController($location) {
$scope.GetLiveStatus = function(item){
// Your code here ...
// nav part
$location.path(<'your path string here'>, {<your path params here>});
}
}
Related
I have a dashboard page. Say it is Student dashboard and it has lots of details about the student like his personal details, course details, project details and etc. Inside student.html personal-details.html, course-details.html,project-details.html are included using ng-include.
Student can view those details as well as they can edit it. For this functionality, I have written a single controller StudentController as follows,
(function(){
"use strict";
angular.module('myApp')
.controller('StudentController',StudentController);
StudentController.$inject=['StudentService'];
function StudentController(StudentService){
var vm = this;
vm.studentData = null;
vm.editPersonalDetails = editPersonalDetails();
vm.editCourseDetails = editCourseDetails();
activate();
function activate(){
StudentService.getStudent().then(queryStudentCompleted);
}
function queryStudentCompleted(res){
vm.studentData = res.data;
}
function editPersonalDetails(){
StudentService.editPersonalDetails(vm.studentData);
}
function editCourseDetails(){
StudentService.editCourseDetails(vm.studentData);
}
}
In my real application there are lots of panels to be shown and everything is editable.
1)Should I use different controller for different ng-included pages or single controller is enough(think that more than 7 htmls are included and every panel is editable)? if yes how do the child controllers(say personalDetailsController, courseDetailsController which have edit methods in it) get access to the vm.studentData which is received in the studentController? In Page I can directly show it using ControllerAs syntax, but when I edit it I need to send the edited values to the child controller..
2)Currently studentData has every details that should be shown in the page. Should I keep that in that way or I need to split the data as well into smaller chunks?
I'm working on an e-commerce like webapp to learn Angular. I have a menu on my home page (common and visible on all pages), which provides available products for e.g. Books, Clothes etc.
On my menu I have list items as follows:
<li>Computers</li>
<li>Academics & Professional</li>
searchProduct function in my first controller sets the selected product in scope and sets the location.path.
$scope.searchProduct =function(productTBSearched){
$scope.TBFProduct=productTBSearched;
$location.path("/SearchProducts");
}
I also have route provider in my first controller which refers to another html and 2nd controller.
$routeProvider.when("/SearchProducts", {
templateUrl: "./views/HomeSearchProducts.html" ,
controller: "productSearchCtrl"
});
In my second controller, I call a REST WS to search DB and build my Response JSON. The issue is when I click on the first item on menu at home page, I get search results and I can see my URL gets changed to ".......Index2.html#/SearchProducts"
Now at this page when I try to choose another menu item, Routeprovider does not call the "ProductSearchCtrl" again and no Ajax call is executed for newly selected item. Could anyone help on this?
I think you are trying to reload the route. You can update your code to something like below in order to reload the route.
$scope.searchProduct =function(productTBSearched){
$scope.TBFProduct=productTBSearched;
if($location.path() === "/SearchProducts") {
$route.reload();
} else {
$location.path("/SearchProducts");
}
}
Reaching out to you all for help yet again for AngularJS. I'm building a SPA where my Layout (master) Page is divided in to three section left navigation bar, center content, right item list bar. My right item list should be hidden when I load my home page, but should be visible in the remaining screens. I've created a $rootScope variable in the homeController and setting the value to 'true' based on the location path and using that variable in the template to set the value to ngHide. When I navigate to a different page as I'm using SPA, my right and left bars won't be loaded again, only my center content do which is a new view. While loading the new view in the controller that is sending the data to the new view's template I'm resetting the $rootScope variable that I've created in homeController to 'false', but my right bar is still not visible. I could see that ng-hidden class is still on though the interpollation has updated the value to 'true'. Any suggestions would be highly appreciated.
markup from layout page:
<aside class="right_bar" ng-hide="{{$root.show}}">
<div class="my-list"><span class="f3">My Cart</span><div class=""><span class="list-count">0</span></div></div><div class="list-item"><ul></ul></div>
</aside>
homeController code:
function getHomeConfigsCtrl($http, $location, $rootScope) {
$rootScope.show = false;
var loc = $location.path();
if (loc === '/Home/Index' || loc ==='')
{
$rootScope.show = true;
}
}
Categories Controller code: This is where I'm resetting my $rootScope variable's value
function getAllCategoryDetails($routeParams,$rootScope) {
$rootScope.show = false;
}
Two things about angular you need to know to make your presented code works:
You don't need to interpolate values using {{}} in ng directives, instead use ng-hide="showCart".
Assuming all your controllers are within the same angular application,
all scopes within the same application inherits from the same root,
i.e whatever you define on the $rootScope will be available to all
child scopes. To access the $rootScope.x from within any view in the application all you have to do is: {{x}} or in your case you're using it inside a directive you can do something like this:
<aside class="right_bar" ng-hide="showCart">
This will look for your current scope, if it has a showCart then it'll use it, otherwise it'll fetch the $rootScope.showCart
Currently I am using the angular to build a prototype application, I have a list of person to show, therefor I built a model for the person. when the people 's list is loaded from the http, the model is rendered. This works well
<li class="person" ng-repeat="person in people" >
<h1>{{person.displayname}}</h1>
<div class="knockout">
<div id="person-{{person.displayname}}"></div> // to add d3.js svg
</div>
</li>
now what I need additionally is as soon as the model is rendered, to use d3.js to add another svg layer on top of the original html.
However, as the code shown below, when the model is updated, I tried to add svg for each html, but it doesn't work since at that time, the html of model is not rendered
$http.get(href).success(function(data) {
$scope.people= data.people; // update the model
var svg = d3.select('#person-'+data.people[0].name)
.append("svg");
}).error(function(data, status, headers, config) {
});
currently what I do is to set a timeout for adding the svg for each html element, but it is better for me to get notified as soon as the model 's html is rendered completely
thanks
The problem is that you people array is rendered after the success method is left. That is normal angular behavior, because their is no way in JavaScript to intercept your code. Angular checks for changes when your callbacks finished. At the time you try to append you svg stuff, non of the ids are present in the DOM.
You could use $scope.$watchCollection("people", function () { ... and render your stuff in the callback, but binding functionality to ids works against the way angular works. Try to find an angular wrapper for d3.js that you can use it without ids and as a directive.
I'm new to AngularJS and hoping someone can help me get my head round this please!
I'm developing a web e-reader that pulls in pages of HTML content dynamically. So far, I'm doing that with an $http AJAX call and binding it in with 'ng-bind-html-unsafe' (the HTML is our own, simply served from a directory on the same server. I have control over the HTML so I could do this differently if needs be). So each time the user presses previous/next, the controller simply fetches in the previous/next page of HTML and switches that in the model - that works great.
But next I need to augment this dynamic HTML with user additions, e.g. comments and highlights. They need to appear where the user adds them, e.g. a comment would most likely sit underneath a particular paragraph.
With JQuery I guess I would give each of the HTML elements its own ID and associate each bit of user-generated content with a particular ID. Then I could manipulate the DOM myself, for example adding each comment under its associated element.
What's the right approach with AngularJS, since the principle seems to be to avoid direct DOM manipulation altogether?
I could see how it could be done by defining the HTML content as separate elements in the model, having individual JavaScript objects for each paragraph, header, image, etc. But that would basically be defining DOM-like data in JavaScript - and that feels quite wrong and messy...
Use an "ng-include" and dynamically bind a src attribute from the controller. Adding dynamic, user generated content is as adding the binding variables to your html. Following is angular code that implements previous/next buttons that dynamically loads html templates and populates them with the user added comments. At the bottom is a link to a fully functional jsfiddle.
angular.module('app',[]).controller('controller', function($scope){
var change;
change = function(){
$scope.src = $scope.page + '.html';
};
$scope.page = 1;
$scope.items = [];
change();
$scope.submit = function(text){
$scope.items.push(text);
};
$scope.next = function () {
if($scope.page < 3){
$scope.page++;
change();
}
};
$scope.previous = function () {
if($scope.page > 1){
$scope.page--;
change();
}
};
});
http://jsfiddle.net/jwanga/rnL7c/