ng-repeat not displaying items - javascript

i have a weird bug in my angular app where the data in my ng-repeat is not displaying but if i refresh the page and navigate to my home page it quickly flickers into view then disappears, im not sure why this is happening can someone help me out?
thanks in advance
appRoutes.js
angular.module('appRoutes', []).config(['$routeProvider','$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider
// home page
.when('/', {
templateUrl: 'views/home.html',
controller: 'MainController'
})
// characters page that will use the CharactersController
.when('/characters', {
templateUrl: 'views/characters.html',
controller: 'CharactersController'
});
$locationProvider.html5Mode(true);
}]);
CharactersCtrl.js
angular.module('CharactersCtrl', []).controller('CharactersController', function($scope) {
$scope.init = function(){
$scope.getCharacters();
}
$scope.getCharacters = function(){
$.ajax({
url:'https://gateway.marvel.com/v1/public/characters?apikey=APIKEY',
success:function(response){
$scope.characters = response.data.results;
console.log($scope.characters);
},
fail:function(){
}
});
}
$scope.init();
});
characters.js
<div>
<div class="text-center">
<h1>Characters</h1>
</div>
<section id="character-section" class="row">
<figure class="columns small-3" ng-repeat="hero in characters">
<!-- <img ng-src="{{hero.thumbnail.path}}" alt="{{hero.name}}-image"> -->
<figcaption>
{{hero.name}}
</figcaption>
</figure>
</section>
</div>
index.html
<body ng-app="marvelApp">
<!-- HEADER -->
<header>
<nav class="navbar navbar-inverse">
<div class="navbar-header">
<a class="navbar-brand" href="/">Stencil: Node and Angular</a>
</div>
<!-- LINK TO OUR PAGES. ANGULAR HANDLES THE ROUTING HERE -->
<ul class="nav navbar-nav">
<li>characters</li>
</ul>
</nav>
</header>
<!-- ANGULAR DYNAMIC CONTENT -->
<main ng-view ></main>
</body>
app.js
angular.module('marvelApp', ['ngRoute', 'appRoutes', 'MainCtrl', 'CharactersCtrl', 'CharactersService']);

You are using jQuery ajax. Angular does not automatically update variable when modified outside the Angular scope (in this case, $scope.characters is modified using jquery ajax);
I sugges you use the $http service provided by angular for making ajax calls.
But if you insist in using jquery ajax, you can wrap this code $scope.characters = response.data.results; with
`$scope.$apply(function(){
})`
Result:
$scope.$apply(function(){
$scope.characters = response.data.results;
})

Related

Why my $scope is not accessible in my controller - Angular JS?

I am not able to get declared scope variable in my controller. Instead I'm getting reference error : message is not defined
Below is my code:
My Index.html
<body ng-app="myApp" ng-controller="homingController" ng-cloak>
<script type="text/javascript">
angular.module('myApp' ['ngRoute','ngMaterial']).controller('homingController', ['$scope',
function($scope){
$scope.message = 'Hello';
}
]).config(function ($routeProvider) {
$routeProvider.when("/home", {
templateUrl: "home.html",
controller: "homingController"
}).when("/monitor", {
templateUrl: "monitor.html",
controller: "monitoringController"
}).otherwise({
redirectTo: '/home'
});
}).controller('monitoringController', function ($scope) {
$scope.message = "Monitor";
});
</script>
<nav class = "navbar navbar-inverse" role="navigation">
<ul class = "nav navbar-nav" >
<li ><img src="./images/home.svg">Home</li>
<li >Monitor</li>
<li ><a class = "active" ui-sref = "Audit" ><img src="./images/audit.svg">Audit</a></li>
<li ><a class = "active" ui-sref = "configuration" ><img src="./images/configure.svg">Configure</a></li>
</ul>
</nav>
</div>
</body>
<div ng-view></div>
My home.html
{{ message}}
/*This line giving error in console : angular.js:14328 ReferenceError: $scope is not defined
*/
Is there anything I am missing here?
Your <div ng-view></div> should be inside your <body> tag. By placing it outside of the body, in which you define your app, the views have no idea what app or controller they should be using.
You also don't need to identify ng-controller's anywhere around your views, since you define them in your routeconfig:
var app = angular.module('myApp' ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when("/home", {
templateUrl: "home.html",
controller: "homingController"
}).when("/monitor", {
templateUrl: "monitor.html",
controller: "monitoringController"
}).otherwise({
redirectTo: '/home'
});
});
app.controller('homingController', function($scope) {
$scope.message = 'Hello';
})
app.controller('monitoringController', function($scope) {
$scope.message = "Monitor";
});
If you want to display something from one of your controllers you should define it like so:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="homingController">
{{message}}
</div>
<nav class="navbar navbar-inverse" role="navigation">
<ul class="nav navbar-nav">
<li>
Home
</li>
<li>
Monitor
</li>
</ul>
</nav>
<div ng-view></div>
</body>
With your home.html & monitor.html containing {{ message }}. An exact example of this can be found at w3Schools (Under the heading "Controllers"). Build that, then once you have that working start expanding on it to fill in the rest of your application.

$location.path change url but no redirecting

I want to redirect to another page by clicking a button, but when I click on a button, URL is changed, but it is not redirected, I have to refresh the page with new URL. The same is also happening when I click on link.
locationController.js
angular.module('reservationModule').controller('locationController', function($scope, $location){
$scope.setLocation = function (url) {
$location.path(url);
};
})
reservationModule.js
(function () {
var resModule = angular.module('reservationModule', ['ngRoute']);
resModule.controller('HomeController', function ($scope) { // here $scope is used for share data between view and controller
$scope.Message = "Yahoooo! we have successfully done our first part.";
});
resModule.config(function ($locationProvider, $routeProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when('/', {
templateUrl: '/Home/Index.cshtml',
controller: 'locationController'
})
.when('/Home/Index', {
templateUrl: '/Home/Index.cshtml',
controller: 'locationController'
})
.when('/Home/Registration', {
templateUrl: '/Home/Registration.cshtml',
controller: 'registerController'
})
.when('/Home/Login', {
templateUrl: '/Home/Login.cshtml',
controller: 'loginController'
})
.otherwise({ redirectTo: '/' });
});
})();
Index.cshtml
#{
// Layout = "~/Views/Shared/_Layout.cshtml";
ViewBag.Title = "Webový rezervační systém";
}
<base href="/">
<div class="container" ng-controller="locationController">
<header class="header">
<div class="headerleft">
<div class="headerlogo">
<img alt="reservation" src="../Content/pics/vetstoria-logo.jpg" width="50" height="50">
</div>
</div>
<div class="headerright">
<p class="headerlogintext">
<a class="btn headerlogin" href="/Home/Login" style="text-decoration:none">Přihlašte se</a>
</p>
</div>
</header>
<div class="content">
<h1 class="content-title">Webový rezervační systém</h1>
<p class="content-title-text">V našem rezervačním systému se můžete rezervovat na cokoliv chcete. Ať už si chcete rezervovat sportoviště, nějaký kurz nebo jiné, u nás to jde snadno.</p>
<p class="content-title-text">Pro začátek vám stačí jediné.</p>
<button class="btn-big" ng-click="setLocation('/Home/Registration')">Registrovat</button>
</div>
<!-- <ul class="menuUl">
<li>#Html.ActionLink("Register", "Registration")</li>
</ul>-->
#section Scripts{
<script src="~/Scripts/Angular_Controllers/locationController.js"></script>
}
I read some topics about this, but I don't know, if an error is in the module, or in the controller.
I had a similar issue. The template url should point to ".html" rather than ".cshtml". When you try to access files inside the Default Folders created by Visual Studio, for some reason you cannot access it. So try changing your path.

Ui Router not showing nested child content

Here is my current code:
let views = { '': 'app/content.html' };
.state('auto', {
url: '/automated',
redirectToChild: {
state: 'auto.index'
},
views: view
})
.state('auto.index', {
url :'',
templateUrl: '/app/automated/automated.html'
})
.state('auto.visit', {
url: '/visit',
views: {
'': {templateUrl: '/app/automated/visit.html'}
}
})
.state('auto.visit.create', {
url: '/create',
views: {
'': {templateUrl: '/app/automated/_form.html'}
}
})
Here is my html:
// index.html
<ui-view></ui-view>
// content.html
<div class="wrapper">
<div class="container">
<ui-view> </ui-view>
</div>
</div>
// visit.html
<h5>Visit Page</h5>
// form.html
<h5>Visit Form</h5>
Here is the problem: Everything works fine with this code but when I visit auto.visit.create state it show visit.html instead of '_form.html'.
How can I replace visit.html content without changing current routes?
First Tried:
I change my auto.visit.create state to auto.visit-create. This way is working perfectly but I want create is child of auto.visit
Second Tried:
I put new <ui-view></ui-view> on visit.html but when I go to create page it will show visit.html content.
I've tried to follow this http://angular-ui.github.io/ui-router/sample/#/ code. But it's not working.
How are you visiting the nested views? The notation you want works perfectly.
you should include the <ui-view></ui-view>in all parent pages.
See the plunker I created as an example; be sure to open the preview in using the separate page view so that you can see the urls that are being generated
UPDATE
I misunderstood your question, I apologize. Below is the updated code and plunker that achieves what you desire. I don't believe there is any way to accomplish this purely through angular routing so I used jquery to do it. only changes are on first layer and second layer
http://plnkr.co/edit/cxQpu6zS7fifnb0sGvGf?p=preview
Angular Code
(function() {
angular.module("myApp", ["ui.router"]);
angular.module("myApp")
.config(["$stateProvider", "$urlRouterProvider", function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/");
$stateProvider
.state("home", {
url: "/",
templateUrl: "blank.html"
})
.state("first", {
url: "/first",
templateUrl: "firstLayerPage.html"
})
.state("first.second", {
url: "/second",
templateUrl: "secondLayerPage.html"
})
.state("first.second.third1", {
url: "/third_Page1",
templateUrl: "thirdLayerPage1.html"
})
.state("first.second.third2", {
url: "/third_Page2",
templateUrl: "thirdLayerPage2.html"
})
}]); // end of config
})(); //end of enclosure
Index
<body ng-app="myApp">
<ul>
<li><a ui-sref="home">home</a></li>
<li><a ui-sref="first">First Layer</a> </li>
</ul>
<h1>Home Page</h1>
<hr>
<ui-view></ui-view>
</body>
first layer
<p>this is the first layer of pages.</p>
<ul>
<li><a id="showSecondLayer" ui-sref="first.second">Second Layer</a> </li>
</ul>
<hr>
<ui-view></ui-view>
<script type="text/javascript">
$(document).ready(function(){
$("#showSecondLayer").click(function(){
$("#secondLayer").show();
});
});
</script>
second layer
<div id="secondLayer">
<p>This is the second layer</p>
<ul>
<li><a id="thirdP1" ui-sref="first.second.third1">Third Layer Page 1</a> </li>
<li><a id="thirdP2" ui-sref="first.second.third2">Third Layer Page 2</a></li>
</ul>
<hr>
</div>
<ui-view></ui-view>
<script type="text/javascript">
$(document).ready(function(){
$("#thirdP1").click(function(){
$("#secondLayer").hide();
});
$("#thirdP2").click(function(){
$("#secondLayer").hide();
});
});
</script>
third layer p1
<p>This is page one of the third level of children</p>
<hr>
third layer p2
<p>This is page two of the third level of children</p>
<hr>

How to use ng-switch as a router for my pages with ngRoute & ngView?

Here is the highlevel skeleton of my Angular SPA. My application is about college degree offerings. In that engineering page has a separate left nav which is currently built on ng-switch which i want to convert as route. How do i do that just using angular's native routing angular-route.js?
**app.js**
(function(){
var app=angular.module("myCollege",['ngRoute']);
app.config(['$routeProvider','$locationProvider',
function($routeProvider,$locationProvider) {
$routeProvider
.when('/', {
templateUrl:"app/views/home.html",
controller:"homeController",
}
.when('/engg', {
templateUrl:"app/views/engineering.html",
controller:"engineeringController",
})
.when('/med', {
templateUrl:"app/views/medical.html",
controller:"medicalController",
})
}]);
I have left nav in engineering.html using ng-switch which i want to
convert as sub-route of the application.This left nav of engineering
page is not inside of ngView. How do i acheive this using angular's
native ngRoute/angular-route?
**engineering.html**
<div nav ng-switch on="pagename()">
<div ng-switch-when="Civil Engineering">
<div civil-directive> </div>
</div>
<div ng-switch-when="Computer Engineering">
<div computer-directive> </div>
</div>
<div ng-switch-when="Nano Engineering">
<div nano-directive> </div>
</div>
<div ng-switch-when="Electrical Engineering">
<div electrical-directive> </div>
</div>
</div>
EngineeringController.js
(function() {
var app =angular.module("collegeApp");
var engineeringController= functino($scope,$rootscope,$location)
{
$scope.pagename = function() {
return $location.path();
};
app.controller("engineeringController",['$scope','$rootScope','$location',engineeringController])
}());
The above logic is not working for me. Can someone tell me where i am doing the wrong?
Not a good practice but here's what you want to do if you want to use ng-switch:
In your html, as you write for example:
<!-- don't forget to reference your app and your controller -->
<button ng-click="goTo('/page1')">Go to page 1</button>
<button ng-click="goTo('/page2')">Go to page 2</button>
<div nav ng-switch on="pagename()">
<div ng-switch-when="'/page1'"></div>
<div ng-switch-when="'/page2'"></div>
</div>
<div ng-view> </div>
in js
Config your routes
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/page1', {
templateUrl: 'views/page1.html'
}).
when('/page2', {
templateUrl: 'views/page2.html'
}).
otherwise({
redirectTo: '/'
});
}])
and add the following in your controller:
$scope.pagename = function() { return $location.path(); };
$scope.goTo = function(page){
$location.path(page);
}
In the html above, ng-switch will use the $location.path() variable to know which view to display.
As I said this is not a good practice, because your controller isn't suppose to deal with routes.

Nested views inside angular ui bootstrap modal

Here is the entrypoint of my angularjs application. What I'm trying to create is an modal with multiple views.
(function() {
'use strict';
angular
.module('app', ['ui.router', 'ui.bootstrap'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('modal', {
url: '/modal',
onEnter: ['$stateParams', '$state', '$modal', function ($stateParams, $state, $modal) {
$modal.open({
templateUrl: 'partials/modal.html',
backdrop: 'static'
});
}]
})
.state('modal.models', {
url: '/models',
templateUrl: 'partials/modal.models.html'
});
})
.run(function ($rootScope) {
$rootScope.$on("$stateChangeError", console.log.bind(console));
});
}());
and this is the main view
<!-- Modal -->
<div id="myModal">
<div class="modal-header">
<h2>Select your own car</h2>
</div>
<div class="modal-body">
<h4>Brands</h4>
<a ui-sref="modal.models">Models</a>
<div ui-view></div>
</div>
</div>
My problem is that when I click on the link ui-sref nothing happens. Why ui-router doesn't work inside a modal? I should pass in the second view that is the following named modal.models.html
<div>
<h1>Hello</h1>
</div>
For those like me that stumble along later, here's another path:
This plunker uses a simple CSS modal (rather than the fancy ui-bootstrap one) to accomplish the same end result --with the additional perk of 'sticky states' that persist underneath the modal interaction. Note that this supports substates within the modal in a uirouter-kosher way.
$stateProvider.state('modal', {
url: '/modal',
views: {
'modal': {
templateUrl: 'modal.html'
}
}
});
$stateProvider.state('modal.substate', {
url: '/substate',
template: '<h3>I\'m a substate in a modal'
});
(Credit to #christopherthielen for the example code.)
<script type="text/ng-template" id="modal.html">
<div class="modal-overlay fade">
<div class="modal-content">
<h2>Modal</h2>
This modal has a substate. <a ui-sref=".substate">Activate it</a>
<div ui-view></div>
<a ui-sref="app">Back to the app...</a>
</div>
</div>
</script>
In my own troubleshooting, the problem with the 'injected-onEnter' pattern detailed in the ui-router FAQ --which your code follows-- is that the ui-views within the injected template seem to be no longer visible/available to ui-router. Alas! Good thing there's not much required to simply roll-your-own modal window.

Categories