I have this in main.html:
<div ng-controller="MainCtrl">
<form ng-controller="SearchCtrl">
<input ng-model="query" ng-change="changed(query)" />
</form>
</div>
And, index.html:
<html>
<head>
<title>Dashboard</title>
</head>
<body ng-app="MyApp">
<nav ng-controller="NavCtrl">
...
</nav>
<div ng-view></div>
</body>
</html>
And, my ngRoute config is as follows:
module.config(function($routeProvider)){
$routeProvider.when('/', {
templateUrl: 'views/main.html',
controller: 'SearchCtrl'
});
}
I tried accessing $scope.$parent in SearchCtrl.js looking for $scope of MainCtrl but I am getting undefined.
I tried changing the controller in my config but then, I am not able to access SearchCtrl. What should I do?
Based on structure shown everything inside ng-view will be in controller set by the route config .... SearchCtrl.
Then inside would be MainCtrl and inside that another (new instance) of SearchCtrl
So should probably change route controller to MainCtrl and remove ng-controller="MainCtrl"
module.config(function($routeProvider)){
$routeProvider.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
});
}
main.html
<div>
<form ng-controller="SearchCtrl">
<input ng-model="query" ng-change="changed(query)" />
</form>
</div>
The main.html already in SearchCtrl scope and you don't need to define the scope again in the view.
Then, defining MainCtrl inside main.html which is under "SearchCtrl" scope will not take MainCtrl as its parent.
Hence remove both controller from main.html
<form>
<input ng-model="query" ng-change="changed(query)" />
</form>
Now in index.html, put the MainCtrl as parent to ng-view
.......
<div ng-controller="MainCtrl">
<div ng-view></div>
</div>
.......
Now try accessing $scope.$parent in your SearchCtrl then you could see it.
Related
Making a very simple application in angular, and everytime I try to do this I run into this problem and never know how to solve it.
App.js is this:
angular.module('Euclid',
['ui.bootstrap',
'ngRoute'])
.controller('mainController', function($scope){
})
.config(['$routeProvider', function($routeProvider){
$routeProvider.
when('/', {
templateUrl: 'views/home.html',
controller: 'HomeController',
controllerAs: 'homeCtrl'
});
}]);
Just some basic routing, nothing in the controller.
Now, that 'HomeController' is set up like this:
var HomeController = function($scope){
var self = this;
// code here
};
angular.module('Euclid').controller('HomeController', HomeController);
And my index.html is set up like so:
<html lang="en" ng-app="Euclid">
<body ng-controller="mainController" ng-cloak>
<script src="node_modules/angular/angular.js"></script>
<script src="app.js"></script>
<div class="container">
<div ng-view></div>
</div>
</body>
</html>
The error in all it's glory is "Argument 'HomeController' is not a function, got undefined". I can not for the life of me figure out where it is getting undefined.
I created a plunker to make things more clear . https://plnkr.co/edit/dL1DPa50mdZtmaJCwcIO?p=preview
As far as I can Understand ,there is no error other than missing some script files.
<html lang="en" ng-app="Euclid">
<body ng-controller="mainController" ng-cloak>
<script src="node_modules/angular/angular.js"></script>
<script src="../angular-route.js"></script> //missing
<script src="/ui-bootstrap-tpls-2.1.2.js"></script> //missing
<script src="app.js"></script>
<div class="container">
<div ng-view></div>
</div>
</body>
</html>
As Phil said ,it is clear that the reason for the
error is the missing of angular-router and angular-bootstrap.
I am getting started with Angular routes. When I define the angular route for someNameController by putting its code into a controllers file and putting the html into a html file, the controller does not seem to bind well with the html. However, it is working correctly with my other controllers.
Links I have tried:
ngRoute not working. is there something i am doing wrong
angularjs ngRoute not working
https://docs.angularjs.org/error/ng/areq?p0=controllers%2FsomeNameController&p1=not%20a%20function,%20got%20undefined
index.html
<!DOCTYPE HTML>
<html>
<head>
<link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="bower_components/angular/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>
<script src="app.js"></script>
<script src="config.js"></script>
<script src="controllers/someNameController.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="jumbotron">
<div ng-app="someApp">
<div ng-view></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
someCustomersView.html
<div>
<h2>
Hello, world!
</h2>
<p>
{{ desc }}
</p>
<p>
<a class="btn btn-primary btn-large" href="#">Learn more</a>
</p>
<input type="text" class="form-control" ng-model="someName"/>
<br>
<p>{{ someName | uppercase }}</p>
<ul ng-repeat="customer in customers">
<li class="list-group-item">{{ customer | lowercase }}</li>
</ul>
</div>
someNameController.js
someApp.controller("someNameController", function($scope){
$scope.customers = ["Customer2", "Customer3", "Customer4", "Customer5"]
})
I made a mistake while declaring routes in config.js file.
I was assigning directory while assigning routes even after including the scripts for controllers in the html along with the directory. I was doing this in config.js:
someApp.config(["$routeProvider", function($routeProvider, $locationProvider){
$routeProvider.when("/showSomeButtonsGroup", {
templateUrl : "views/view3.html",
controller : "controllers/page67Controller"
})
.when("/", {
templateUrl : "views/someCustomersView.html",
controller : "someNameController"
})
}])
instead of doing like this:
someApp.config(["$routeProvider", function($routeProvider, $locationProvider){
$routeProvider.when("/showSomeButtonsGroup", {
templateUrl : "views/view3.html",
controller : "page67Controller"
})
.when("/", {
templateUrl : "views/someCustomersView.html",
controller : "someNameController"
})
}])
I am using this code to view and add peoples in an array.
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<body>
<h1>People</h1>
<div ng-controller="Ctrl">
<div ng-view></div>
</div>
<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>
<script src="controller.js"></script>
</body>
</html>
add.html
<h1>Add</h1>
<input type="text" ng-model="new_name" placeholder="Name">
<br />
<input type="text" ng-model="new_age" placeholder="Age">
<br />
<button ng-click="add()">Add</button>
<hr />
Back
controller.js
var app = angular.module('myApp', ['ngRoute']);
app.config(function ($routeProvider){
$routeProvider
.when('/',{
templateUrl: 'list.html'
})
.when('/add',{
templateUrl: 'add.html',
});
});
app.controller('Ctrl', function($scope) {
$scope.people = [{'name':'Alex', 'age':25}, {'name':'Dan', 'age': 25}];
$scope.add = function(){
$scope.people.push({'name':$scope.new_name, 'age':$scope.new_age});
$location.path("/");
};
});
The problem is, I am not getting data from ng-model="new_name" into the controller method $scope.add = function(). After pressing add button only blank strings gets pushed into array. However the model and controller working perfectly without routing and ng-view directive. I think its scope related problem. Can any body help me in this.
Thanks.
Because you should specify the controller for each view. So try doing this:
app.config(function ($routeProvider){
$routeProvider
.when('/',{
templateUrl: 'list.html',
controller: 'Ctrl'
})
.when('/add',{
templateUrl: 'add.html',
controller: 'Ctrl'
});
});
A better solution would be to have a separate controller for each view. Also, have a look at the $routeProvider documentation.
Just delete <div ng-controller="Ctrl"> from index.html and add a controller attribute for your route.
controller.js
var app = angular.module('myApp', ['ngRoute']);
app.config(function ($routeProvider){
$routeProvider
.when('/',{
templateUrl: 'list.html'
})
.when('/add',{
templateUrl: 'add.html',
controller: 'Ctrl'
});
});
app.controller('Ctrl', function($location,$scope) {
$scope.people = [{'name':'Alex', 'age':25}, {'name':'Dan', 'age': 25}];
$scope.add = function(){
$scope.people.push({'name':$scope.new_name, 'age':$scope.new_age});
$location.path("/");
};
});
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<body>
<h1>People</h1>
<div ng-view></div>
<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>
<script src="controller.js"></script>
</body>
</html>
first you have to wrap your inputs with <form> tag with name='' attribute.
Next step is to give name='' attributes for each <input> tag. Look:
<form name='myLoginForm'>
<input name='nick' ng-model='loginFormModel.nick'>
<input name='password' ng-model='loginFormModel.password'>
</form>
In controller:
app.controller('Ctrl', function($location,$scope) {
$scope.loginFormModel = {}; //now you have whole values from view in this variable, for example nick is available in $scope.loginFormModel.nick
});
For some reason I cannot retrieve the data from my controllers scope variables in my views. All of my views use the same controller, so I am not sure what went wrong. Any help would be appreciated.
Here is my App.js
var app = angular.module('app', [
'ngRoute'
]);
// Route configurations
app.config(['$routeProvider', function ($routeProvider){
$routeProvider.when('/', {
templateUrl: 'partials/home.html',
controller: 'MainController'
})
.when('/countries', {
templateUrl: 'partials/countriesList.html',
controller: 'MainController'
})
.when('/details', {
templateUrl: 'partials/countryDetails.html',
controller: 'MainController'
})
.otherwise({
redirectTo: '/'
});
}]);
// Main Controller Setup
app.controller('MainController', ['$scope', MainController]);
function MainController ($scope){
$scope.hello = 'hello';
}
Here is one of the view I am trying to access the scope in:
<h1>Country List</h1>
<button class="btn">Countries Details</button>
<p>hello: {{hello}}</p>
Here is my index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<title>Countries and Capitals</title>
<link rel="stylesheet" type="text/css" href="css/vendor/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body ng-controller="MainController" ng-cloak>
<div class="container">
<div class="row">
<div class="col-sm-12 text-center">
<ng-view></ng-view>
</div>
</div>
</div>
<script src="js/vendors.js"></script>
<script src="js/scripts.js"></script>
</body>
</html>
The problem because of nested scopes. The better way use some nested scopes is use controllerAs method. Could you try:
```
<body ng-controller="MainController as myctrl" ng-cloak>
<p>hello: {{myctrl.hello}}</p>
```
What you do while adding a controller in ng-route is you create another scope of the same controller. My suggestion is you use either no controller i.e. remove controller attribute or add $parent. in the view you are referencing.
The first one is preferred if u want to have same scope over a set of pages, the second one is preferred when u have different controllers for different pages.
Along with that if u want to access global variables, u can add them to $rootScope and access them globally..
Hope this helps
basically my issue is that I have a AngularJS view (home.html) which contains a variable in double brackets like so: {{message}}
When the $scope.message variable is modified, the view with does not update, although it should? I have tried adding $scope.$apply() which results in an exception along the lines of 'Action in Progress'
Check my code below. The {{message}} part in home.html is not being updated when $scope.doLogin is called in MainCtrl, even though I have set $scope.message to a new value in that function.
Any help is greatly appreciated and if any further info is needed, please ask.
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<link href="stylesheet.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular-route.min.js"></script>
<base href="/">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ngStorage/0.3.9/ngStorage.js"></script>
<script src="https://cdn.socket.io/socket.io-1.3.5.js"></script>
</head>
<body>
<div ng-controller="MainCtrl">
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">TriviaAttack</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<form id="loginForm" class="navbar-form navbar-right">
<div class="form-group">
<input type="text" placeholder="Email" class="form-control" ng-model="loginData.username">
</div>
<div class="form-group">
<input type="text" placeholder="Password" class="form-control" ng-model="loginData.password">
</div>
<div class="form-group">
<button type="submit" class="btn btn-success" ng-click="doLogin()">Sign In</button>
</div>
</form>
</div>
</div>
</nav>
</div>
<div ng-view>
</div>
</div>
<script src="./app/app.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">
</body>
</html>
home.html
<div>
<h1>Welcome to the Home Page</h1>
<p>{{message}}</p>
</div>
app.js
var myApp = angular.module('myApp',['ngRoute', 'ngStorage']);
myApp.controller('MainCtrl', ['$rootScope', '$scope', '$location',
function($rootScope, $scope, $location) {
$scope.message = 'testing message';
$scope.loginData = {
username: '',
password: '',
loggedIn: false
}
$scope.doLogin = function() {
$scope.message = 'message changed!';
$scope.$apply();
Auth.doLogin($scope.loginData.username, $scope.loginData.password)
.success(function(data) {
if (data.success) {
AuthToken.setToken(data.token);
$location.path('/home');
console.log($scope.loginData.loggedIn);
}
});
$scope.loginData = {};
}
}]);
//Middleware for all requests which adds the users token to the HTTP header.
myApp.factory('TokenInterceptor', ['$q', '$location', '$localStorage',
function($q, $location, $localStorage) {
//On each request, check if the user is logged in with a valid token.
var interceptor = {
request: function(config) {
config.headers['X-Authorization-Token'] = $localStorage.token;
return config;
},
responseError: function(response) {
if(response.status === 401 || response.status === 403) {
$location.path('/login');
}
return $q.reject(response);
}
};
return interceptor;
}]);
myApp.config(['$routeProvider','$locationProvider','$httpProvider',
function($routeProvider, $locationProvider, $httpProvider) {
$routeProvider.
when('/', {
templateUrl: './app/views/landingpage.html',
controller: 'MainCtrl'
}).
when('/home', {
templateUrl: './app/views/home.html',
controller: 'MainCtrl'
}).
otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true);
$httpProvider.interceptors.push('TokenInterceptor');
}
]);
console.log('app.js loaded!');
Each time a view is loaded ,the controller code with new scope executes so the new message is not reflected.
So the flow be like
landingPage's controller which is MainCtrl with its scope when $scope.doLogin is executed will change the $scope.message variable to "Message Changed" and upon changing location to home , the MainCtrl is assigned to home page with new scope which would continue executing the very first line of MainCtrl i.e.
$scope.message = 'testing message';
As you have decided to use common controller for login and home pages
Try removing controller option in
when('/', {
templateUrl: './app/views/landingpage.html',
controller: 'MainCtrl'
}).
when('/home', {
templateUrl: './app/views/home.html',
controller: 'MainCtrl'
})
And assign controller in
<div ng-controller="MainCtrl">
<!--omitted-->
<div ng-view></div>
</div>
Or else other options would be to pass parameters or use
ui-router wherein nested views would automatically inherit from parent controllers without rerunning the controller logic.
Problem is in controller coverage
<div ng-controller="MainCtrl">
<!--omitted-->
</div>
<div ng-view></div>
Your $scope.message is tight to your MainCtrl, so when ng-view is populated, you except that it has MainCtrl, but indeed it's outside of that div, so just doesn't see that variable, to make it work, insert ng-view to MainCtrl div like shown below
<div ng-controller="MainCtrl">
<!--omitted-->
<div ng-view></div>
</div>
But here's the actual problem
You tend to use ng-route but you don't have any route configurations, ng-view will never be populated with home.html unless you configure you routeProvider, first of all, make some routes like described here, perform your form action, redirect to page and populate views accordingly, it should work.