I'd like to set a scope for a different route but it seems not working...
var app = angular.module('AngularApp', ['ngRoute', 'ngAnimate']);
app.config(function($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'menu.html',
controller: 'MenuController'
}).when('/slides/:menuItem', {
templateUrl: 'slides.html',
controller: 'SlidesController'
});
});
app.controller('MenuController', function($scope, $http) {
$http.get('database.json').then(function(response) {
$scope.bottomBar = 'no';
$scope.pageClass = 'menus';
$scope.database = response.data;
});
});
app.controller('SlidesController', function($scope, $http, $routeParams) {
$http.get('database.json').then(function(response) {
$scope.bottomBar = 'yes';
$scope.pageClass = 'slides';
$scope.database = _.find(response.data.menuItems, {'url': $routeParams.menuItem});
});
});
<body ng-app="AngularApp">
<div class="line">
<div class="col-12">
<img src="images/logo.jpg">
</div>
</div>
<div class="page {{pageClass}}" ng-view></div>
<div class="bottom-bar">
<ul>
<li>Retour {{bottomBar}}</li>
</ul>
</div>
</body>
bottomBar is empty...
Looks like you are putting html in app directly.
You can move below code in a template and use ng-include to add this template in you all views.
<div class="bottom-bar">
<ul>
<li>Retour {{bottomBar}}</li>
</ul>
</div>
This is because your controller scope is present in this div with ngView. Therefore anything outside this div won't have scope binding.
<div class="page {{pageClass}}" ng-view></div> <!-- controller active here only -->
Related
I have been facing this from a long time, it is thrown when I'm trying to bind data to a variable in the html using {{}}. I used ngRoute for routing among different pages. The above mentioned error occurs when I'm trying to bind data to a variable or ng-model in the HTML.
But it works fine when the model's value is already declared in the controller.
The data that I'm receiving is from a custom service, which eventually makes an http GET request upon calling it from a controller.
<html ng-app="bgpsApp">
<body>
<div ng-view></div>
</body>
<!-- scripts loaded in a sequence:
jquery, angular.js(1.6.9), angular-route.js, app.js, customservices.js -->
</html>
app.js
var bgpsapp = angular.module('bgpsApp', ['ngRoute']);
bgpsapp.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'brahmagpslogin.html'
})
.when('/portal', {
resolve: {
"check": function($location, $rootScope) {
if (!$rootScope.logStatus) {
$location.path('/');
}
}
},
templateUrl: 'portal.html'
})
.otherwise({
redirectTo: '/'
})
})
bgpsapp.controller('MainController', ['$scope', '$rootScope', '$http', 'services', function($scope, $rootScope, $http, services) {
services.getDashboardData($rootScope.master.userId).then(function(response) {
$scope.vehiclesStatus = response.data.data.vehiclesStatus;
console.log($scope.vehiclesStatus);
// ** assigning value to bind **
$scope.vehicleCount = $scope.vehiclesStatus.vehicleCount;
}, function(response) {
alert(response.data.message);
});
}]);
portal.html
<div id="wrapper" ng-controller="MainController">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-7 col-lg-7">
<h4>Vehicles
<small> Status</small>
</h4>
</div>
<div class="col-xs-12 col-sm-12 col-md-5 col-lg-5">
<h4>
<!-- trying to bind data to this variable -->
{{vehicleCount}}
<small>Trucks</small>
</h4>
</div>
</div>
</div>
custom service js
bgpsapp.service('services', function($http) {
this.baseURL = "http://xxx/api/data";
this.getDashboardData = function(customerId) {
var d_response = {};
var response = $http.get(this.baseURL + "/customer/data/dashboard?userId=" + customerId);
return response;
}
});
I want to display the clicked row button details info in next view,I am displayin only code,nom in first page and remaining fields will view after clicking button.
I used the option "filter" to do it, but sometimes it returns details of non concerned code , like for the two codes: 45 and 453 , it gaves the same detail because of the common number '45'.
First html page:
<div class="row header">
<div class="col" >Code</div>
<div class="col">Client</div>
</div>
<div class="row" ng-repeat="x in namesC">
<div class="coll">
<a class="button" href="#/detail/{{x.Code}}">
{{x.Code}}</a>
</div>
<div class="col"> {{x.NomClient}} </div>
</div>
second html page (detail.html):
<ion-list ng-repeat="x in namesC| filter: {Code: thisX}|limitTo:1">
<ion-item>
<div class="item item-divider center-text"> {{x.Code}}</div>
</ion-item>
<ion-item>
<b>adresse</b> <span class="item-note"> {{x.adresse}} </span>
</ion-item>
</ion-list>
app.js :
$stateProvider.state('detailColis', {
url: '/detail/:Code',
templateUrl: 'templates/detail.html',
controller: 'SuiviAdminCtrl'
});
You must add Config file Or add the down code in html file to solve this problem
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/detail/:Id", {
templateUrl : "detail.htm"
})
});
</script>
I tested the above code, its working.
We can use $routeParams, Also we can use service. See basic example and try like below.
var app = angular.module('exApp',['ngRoute']);
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider){
$routeProvider
.when('/', {
template:'<p>All Datas View</p><p ng-repeat="data in datas">{{data.name}} <button ng-click="setData(data)">View</button> routeParams.. <button ng-click="setrouteData($index)">Index</button></p>',
controller: 'ctrl',
})
.when('/detail',{template:'<p>Particular Data View</p><button ng-click="back()">Back</button><br><p>{{data}}</p>',controller: 'ctrlOne'})
.when('/detail/:id',{template:'<p>Data View</p><button ng-click="back()">Back</button><br><p>{{data}}</p>',
controller: 'ctrltwo'})
.otherwise({redirectTo:'/'});
}]);
app.controller('ctrl', function($scope,$location,exService){
$scope.datas = exService.data;
$scope.setData = function(data){
//console.log(data);
exService.Obj = data;
$location.path('detail');
}
$scope.setrouteData = function(index){
$location.path('detail/'+ index);
}
});
app.controller('ctrlOne', function($scope,$location, exService){
var data = exService.Obj;
$scope.data=data;
$scope.back = function(){
$location.path('/');
}
});
app.controller('ctrltwo', function($scope,$location, $routeParams,exService){
var data = $routeParams.id;
$scope.datas = exService.data;
$scope.data=$scope.datas[data];
$scope.back = function(){
$location.path('/');
}
});
app.service('exService', function(){
var Obj = {};
var data = [{"id":1, "name":"xxx"},{"id":2, "name":"yyy"},{"id":3, "name":"zzz"}];
return { Obj, data};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-route.min.js"></script>
<body ng-app="exApp">
<p>Sample</p>
<div ng-view></div>
</body>
this is the solution, Thanks to Sudarshan_SMD
The solution is just to change filter: with :
filter: {CodeEnvoiColis: thisX}:true
I currently use views/foo.html as a normal view.
Say this view has this:
<p>Hello</p>
Now I want to reuse views/foo.html as the content of a modal, but I'd like to wrap it with this:
<div class="modal-header">
<h3 class="modal-title">Foo</h3>
</div>
<div class="modal-body">
<!-- I want to include views/foo.html in here -->
</div>
So the modal would look like this:
<div class="modal-header">
<h3 class="modal-title">Foo</h3>
</div>
<div class="modal-body">
<p>Hello</p>
</div>
The modal invoker is the following: (notice the comment)
$scope.openFooModal = function () {
var modalScope = $scope.$new();
var modalInstance = $uibModal.open({
templateUrl: 'views/foo.html', /* HERE I NEED TO WRAP IT */
controller: 'fooController',
scope: modalScope,
size: 'lg'
});
modalInstance.result.then(function (result) {
}, null);
};
What is the best solution?
Should I create a foo2.html ?
So at the end the comment made by JB Nizet worked as a start, but there was this issue:
Inject $uibModalInstance to a controllar not initiated by a $uibModal
This is what I did finally:
view in charge of opening the modal or displaying it as an ng-view:
<body ng-controller="indexController">
<ul>
<li>
Open as modal
</li>
<li>
Open as non modal
</li>
</ul>
<div ng-view=""></div> <!-- Used by routeProvider -->
</body>
...its controller
angular.module('myApp').controller('indexController', ['$scope','$uibModal', function($scope,$uibModal) {
$scope.openModal = function () {
var modalScope = $scope.$new();
var modalInstance = $uibModal.open({
templateUrl: 'foo-as-modal.html',
controller: 'fooController',
scope: modalScope
});
modalScope.modalInstance = modalInstance;
// ^ I'm giving the modal his own reference
// using the scope. Injecting wont work on
// the non-modal case!
modalInstance.result.then(function (result) {
}, null);
};
}]);
view to be reused as a modal or as a non-modal:
<p>Hello {{name}}</p>
its controller:
angular.module('myApp').controller('fooController', ['$scope', function($scope) {
// ^
// I'm not injecting
// uibModalInstance
// (this is important)
$scope.name = "John";
$scope.cancel = function () {
$scope.modalInstance.dismiss('cancel');
// ^ I can access the modalInstance by the $scope
};
}]);
view to be used as a modal (wrapper)
<div class="modal-header">
<h3 class="modal-title">I'm a modal</h3>
</div>
<div class="modal-body">
<ng-include src="'foo.html'"></ng-include> <!-- Credits to JB's comment -->
</div>
<div class="modal-footer">
<button class="btn btn-default" ng-click="cancel()">Close</button>
</div>
routeProvider
$routeProvider
.when('/nonmodal', {
templateUrl: 'foo.html',
controller: 'fooController'
})
Here is a plunkr: https://plnkr.co/edit/ZasHQhl6M5cCc9yaZTd5?p=info
I have a listing of blog posts and I want to be able to click on the title and have it dynamically redirect to the proper posting.
So far it works except when I click on the anchor tagged title it redirects to:
blog/#/post/:post
rather than
blog#/post/:post
I've tried to change the href to data-ng-href,
using target="_self"
and tried changing the href="#/post/{{post}}" and href="/post/{{post}}"
Routes:
(function(){
'use strict';
angular.module('ghpg')
.config(Config);
Config.$inject = ['$routeProvider'];
function Config($routeProvider){
$routeProvider
.when('/listing', {
templateUrl: '/angular/views/listing.client.view.html'
}).otherwise({
redirectTo:'/'
}).when('/post/:title',{
templateUrl: '/angular/views/post.client.view.html',
controller: 'postController',
controllerAs: 'post'
}).otherwise({
redirectTo:'/listing'
});
}
})();
Listing View:
(function(){
'use strict';
angular
.module('ghpg')
.controller('listingController', listingController);
listingController.$inject = ['$scope', 'blogContent'];//,'blogContent'] //, 'blogContent'];
////
function listingController($scope, blogContent){
var vm = this;
vm.articles = [];
grabData();
function grabData(){
return blogContent.getContent().then(function(data){
console.log(data.articles);
vm.articles = data.articles;
return vm.articles;
},function(err){
console.log(err);
vm.data = [];
});
}
}
})();
App.js:
(function(){
'use strict';
var dependencies = [
'ghpg',
'ngRoute'
];
angular.module('blogger', dependencies)
.config(Config);
Config.$inject = ['$locationProvider']
function Config($locationProvider){
$locationProvider.hashPrefix('!');
}
if (window.location.hash === '#_=_'){
window.location.hash = '#!';
}
//bootstrap angular
angular.element(document).ready(function(){
angular.bootstrap(document, ['ghpg']);
});
})();
LISTING VIEW:
<div class="container-fluid" data-ng-Controller="listingController as vm">
<h2> Listings </h2>
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-8">
<div class="post-listing" data-ng-repeat="post in vm.articles">
<h3 class="article-title"><a target="_self" data-ng-href="/blog#/post/{{post.title}}"> {{ post.title }} </a></h3>
<div class="article-container">
<div class="article-date"><span class="article-date">{{ post.date }}</span></div>
<div class="article-post>"><span class="article-content"> {{ post.content }} </span></div>
</div>
</div>
</div>
</div>
</div>
Having trouble where I went wrong. I strongly suspect that it's some small typo or something with my SPA location/locationProvider in app.js but it looks the same in my other apps, unless my eyes are fooling me (which could be totally happening!)
What I did for a fix was simply this:
changed the listing view's anchor:
<h3 class="article-title"><a target="_self" data-ng-href="/post/{{post.title}}"> {{ post.title }} </a></h3>
to include the /blog# portion in the href so that I have:
<h3 class="article-title"><a target="_self" data-ng-href="/blog#/post/{{post.title}}"> {{ post.title }} </a></h3>
Simple fix, cause only the blog portion or webpage of my website is the angularJS, everything else is not so the routing was not being called to route it until it saw /blog# as part of the app.
I have an angular web app that I am trying to get escaped_fragments to work using Mean-seo (under the covers it uses phantomjs headless browser)
I am getting strange behaviour I can't explain.
The non escaped fragment works fine.
With escaped fragments some of the content immediately disappears.
I have an object that I am reading from the mongo db in the resolve section of the routes config like so.
state('view-creator-test', {
url: '/view-creator-test/:creatorId',
templateUrl: 'modules/creators/views/view-creator-test.client.view.html',
resolve: {
creator: function($stateParams, Creators) {
return Creators.get({
creatorId: $stateParams.creatorId
}).$promise;
}
},
controller: function($scope, creator) {
$scope.resolveCreator = creator;
}
}).
then the view template is
<section data-ng-controller="CreatorTestController" >
<!-- !CREATOR PROFILE -->
<section class="profile-header inverse">
<div class="container">
<!-- AVATAR -->
<div class="row">
<!-- NAME / LOCATION -->
<div class="col-sm-8 col-sm-offset-1 col-xs-12 text-center-sm">
<div class="row">
<div class="col-sm-6 col-xs-12">
<h2 class="name">{{creator.name}}</h2>
<h2 class="name" ng-bind="creator.name"></h2>
</div>
<h2 class="name">{{test}}</h2>
<h2 class="name" ng-bind="test"></h2>
</div>
</div>
</div>
</div>
</section>
</section>
then the controller is
'use strict';
angular.module('creators').controller('CreatorTestController', ['$scope',
function($scope) {
$scope.test = 'Leo was Here';
$scope.creator = $scope.resolveCreator;
}]);
the result is that the creator name is filled in for {{creator.name}} but is not filled in for ng-bind="creator.name".
'Leo was here' is filled in for both.
Thanks
Instead of defining controller function in state and then do assign that $scope inside variable through template, you could place the CreatorTestController inside the route, so that you directly inject the dependency inside the CreatorTestController function, Remove ng-controller from the template
.state('view-creator-test', {
url: '/view-creator-test/:creatorId',
templateUrl: 'modules/creators/views/view-creator-test.client.view.html',
resolve: {
creator: function($stateParams, Creators) {
return Creators.get({
creatorId: $stateParams.creatorId
}).$promise;
}
},
controller: 'CreatorTestController'
})
Controller
'use strict';
angular.module('creators').controller('CreatorTestController', ['$scope', 'creator', //<-- injected resolve method here.
function($scope, creator) {
$scope.test = 'Leo was Here';
$scope.creator = creator;
}]);