I've an issue with Angular JS. I don't get why my data in the scope can't be displayed with the {{ }} but can be display if I use the directive : data-ng-bind.
If anyone has an idea :
Here's my HTML Code :
<aside id="sidebar-left" class="sidebar-left" data-ng-controller="PortalController" data-ng-init="getAppslist()">
<div class="sidebar-header">
<div class="sidebar-title">
Navigation
</div>
<div class="sidebar-toggle hidden-xs" data-toggle-class="sidebar-left-collapsed" data-target="html" data-fire-event="sidebar-left-toggle">
<i class="fa fa-bars" aria-label="Toggle sidebar"></i>
</div>
</div>
<div class="nano" >
<div class="nano-content">
<nav id="menu" class="nav-main" role="navigation">
<ul class="nav nav-main">
<li class="nav-active">
<a href="#!/">
<i class="fa fa-home" aria-hidden="true"></i>
<span>Dashboard</span>
</a>
</li>
<li>
<a href="#!/users">
<i class="fa fa-users" aria-hidden="true"></i>
<span>Users</span>
</a>
</li>
<li class="nav-parent">
<a href="#!/apps">
<i class="fa fa-cubes" aria-hidden="true"></i>
<span>Apps</span>
</a>
<ul class="nav nav-children">
<li ng-repeat="app in appslist">
<a ng-href="#!/apps/{{app.CloudAppInstanceId}}">{{app.Name}}</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</aside>
Here's my controller :
angular.module('core').controller('PortalController', ['$scope', 'Portal',
function($scope, Portal) {
$scope.getAppslist = function() {
Portal.getApps(function(callback) {
$scope.appslist = callback;
$scope.blabla = 'blabla';
});
};
}]);
And here's my service :
angular.module('core').factory('Portal', function($http, $cookies, $rootScope) {
// define factory object
var factory = {};
var getApps = function(callback){
$http.get($rootScope.logrrApiAddress + '/apps', config).success(function(data, status, headers, config) {
callback(data);
});
}
factory.getApps = function(callback){
return getApps(callback);
}});
Thanks in advance for your response
Martin Taz
You don't need handlebars in an ng-href. Try:
<a ng href="'#!/apps/' + app.CloudAppInstanceId">{{app.Name}}</a>
Better yet would be to turn that into a method on your controller.
<a ng href="'#!/apps/' + app.CloudAppInstanceId">{{app.Name}}</a>
Seems to me that app is not defined in the scope, what you do set in PortalController, though, is $scope.appslist.
Also, the Portal factory function must return an object instance (it currently doesn't return anything). AND the factory's method must actually return a promise, too.
angular.module('core').factory('Portal', [
'$http', '$cookies', '$rootScope',
function($http, $cookies, $rootScope) {
var factory = {}; // define factory object
factory.getApps = function(){
// FIXME: what is "config", where is it supposed to come from?
return $http.get($rootScope.logrrApiAddress + '/apps', config);
};
return factory; // <-- you need to return something
}
]);
angular.module('core').controller('PortalController', [
'$scope', 'Portal',
function($scope, Portal) {
$scope.getAppslist = function() {
Portal.getApps().then(function (data) {
$scope.apps = data;
$scope.blabla = 'blabla';
});
};
}
]);
I changed things a bit, esp. got rid of the callback parameter - you don't need that, simply get the promise that getApps() returns and use the data once the promise is resolved.
Related
i have uikit dropdown template in which i am trying add ng-reapet but drop down not working.
guys please help .....
<div class="uk-button-dropdown" uk-dropdown="{mode:'click'}">
<button class="md-btn">Click me <i class="material-icons"></i></button>
<div class="uk-dropdown">
<ul class="uk-nav uk-nav-dropdown">
<li ng-repeat="item in locationName">
{{item}}
</li>
</ul>
</div>
</div>
module
var addlocationModule = angular.module('addLocationApp', ['ngDialog']);
addlocationModule.controller('addLocationController', function ($scope, $http, $window, ngDialog) {
$scope.initialize = function(alllocation,loggedInEmployee)
{
$scope.alllocations = alllocation;
$scope.loggedInEmployee = loggedInEmployee;
$scope.locationName = [];
$scope.alllocations.forEach(function(resource) {
$scope.locationName.push(resource.title);
});
}
$scope.addLocations = function() {
$http.post('/addLocationName',$scope.location).then(function successCallback(response) {
if(response.data.status){
$scope.alllocations.push(response.data.location);
$scope.location.name="";
$scope.location.description="";
}
}, function errorCallback(response) {
// called asynchronously if an error occurs
// or server returns response with an error status.
})
}
});
you should add ng-repeat in ul tag
<ul class="uk-nav uk-nav-dropdown" ng-repeat="item in locationName">
<li>
{{item}}
</li>
</ul>
i think it'll help you.
I'm developing backend with Parse. I can get data from Parse but I can't show with ng-repeat with AngularJS.
app.controller('QuestionsController',['$scope', function ($scope) {
var query = new Parse.Query(_Categories);
query.find().done(function(data){
$scope.Categories = data;
console.log($scope.Categories);
});
$scope.Logout = function(){
Parse.User.logOut();
window.location.href = '#';
}}]);
I'm using ngRoute and this HTML codes
<div class="menu">
<div class="container">
<div class="bars"><i class="fa fa-bars"></i></div>
<ul>
<li ng-repeat="Category in Categories">{{Category.Name}}</li>
</ul>
</div>
</div>
I can see data on Console but I can't show on page.
I solved this problem. Controller codes is
var query = new Parse.Query(_Categories);
query.find({
success: function(data){
$scope.Categories = data;
$scope.$apply();
}
});
And i wrote this code on HTMl
<div class="bars"><i class="fa fa-bars"></i></div>
<ul>
<li ng-repeat="cat in Categories">
<a href="#" >{{cat.get('Name')}}</a>
</li>
</ul>
</div>
okay, so I am building a web-app using angular.js. I have started to implement user authentication.
I did this with it's own controller:
app.controller("userControl", ["$http", "share", function($http, share){
this.login = {};
var user = this;
this.doLogin = function(){
this.login.fn = "login";
$http.post('classes/main.php', user.login).success(function(data){
console.log(data.Error);
if(data.Error == undefined){
alert("Success");
share.user = data;
window.location.href = "#memberHome";
}
});
}
}]);
and I have a member's page with it's own controller:
HTML:
<div id="memberHome" data-role="page" ng-controller="member-Ctrl as member">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<p class="navbar-brand" href="#">Calendar</p>
</div>
<ul class="nav navbar-nav navbar-left">
<li>Overview</li>
<li>Friends</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Logged in as: {{member.user.forename + " " + member.user.surname}}</li>
<li><span class="glyphicon glyphicon-log-in"></span> Log Out</li>
</ul>
</div>
</nav>
<div data-role="content">
<calendar selected="day"></calendar>
</div>
</div>
javascript:
app.controller("member-Ctrl", ["share", function(share){
this.user=share.user;
}]);
I need the User controller to tell the member controller the details of the new user.
I googled this and looked at the answers of a similar question, which led me to This
and i created a service as shown in the video:
app.service("share", function(){
this.user = {}
});
Now whenever i login and get redirected to the memberHome page, it tells me Logged in as:
Can anybody see why this might be?
I am very new to Angular, and am learning, just about, everything when I need it.
I should probably say that i am using jQuery Mobile (for a multi-page document) and Bootstrap 3
You can use a service to share information between controllers or use the $rootScope
var app = angular.module('mymodule',[]);
app.controller('Controller1', ['$scope','$rootScope',
function($scope, $rootScope) {
$rootScope.showImages = true;
}]);
app.controller('Controller2', ['$scope','$rootScope',
function($scope, $rootScope) {
$rootScope.showImages = false;
}]);
And in the template:
<div ng-controller="Controller1">
<div class="images" ng-show="$root.showImages"></div>
</div>
Using AngularJS v1.3.15
I am getting a weird syntax error:
http://errors.angularjs.org/1.3.15/ngRepeat/iexp?p0=item%20asNaNtems
This is my template (templateUrl):
<div class="context-menu" ng-if="showMenu">
<div class="context-menu-item" ng-repeat="item as items" ng-class="{disabled: item.isDisabled()}">
<a href="" ng-click="fire(item)">
<i class="fa" ng-class="item.getIcon()"></i> {{item.getName()}}
</a>
</div>
</div>
The directive starts with a $scope.items = [] in the controller function of that directive:
angular.module('app').directive('atContextMenu', [
function() {
return {
'templateUrl': '...',
'controller': function($scope, $element) {
$scope.items = [];
}
};
}
]);
As the link says (if you have clicked on the link) you got the syntax wrong. It should be item in collection:
ng-repeat="item in items"
I am trying to run some javascript after the data from JSON has successfully loaded so I can then manipulate my dom elements, but having trouble accomplishing this as when I run my javascript, the elements are not loaded yet.
app.controller('portfolioController', function($scope, $route, $http) {
$scope.contents = null;
$http.get("js/json/portfolio.json").success(function(data) {
$scope.contents = data;
alert('alert this after all elements are loaded on dom');
});
});
<ul class="projects basic" >
<li ng-repeat="content in contents">
<img src="img/projects/{{ content.image }} " >
<a class="hover" ></a>
</li>
</ul>
So I ended up using the ng-click directive on my dom, then called in the click function, which worked great. Here is updated code:
app.controller('portfolioController', function($scope, $route, $http) {
$scope.classes = 'basic about';
$scope.contents = null;
$http.get("js/json/portfolio.json").success(function(data) {
$scope.contents = data;
});
$scope.showDetails = function() {
alert('do stuff after everything is loaded');
}
});
<ul class="projects basic" >
<li ng-repeat="content in contents">
<img ng-src="img/projects/{{ content.image }} " >
<a ng-click="showDetails()" class="hover" ></a>
</li>
</ul>