I have found a number of posts talking about models/views not updating, but I still can't figure this out. I'm new to Angular, btw so I suspect this is noob issue.
I have the below Angular app.
When the text input test_var is edited, the edited value isn't updated in the sidebar, but it is in the view. Why and how do I fix it?
This works when I don't use views and routes.
I've tried a sidebar controller, but no difference. I've tried $rootScope, which partially worked (it broke other functionality), but I'd prefer not to use a global scope.
Thanks for taking a look.
HTML
<body>
<div ng-app="rxApp" ng-controller="WizardCtrl">
<div class="ng-view">
</div>
<div class="sidebar">
<span ng-bind="test_var"></span>
</div>
</div>
</body>
View (One.html)
<input ng-model="test_var" />
<span ng-bind="test_var"></span>
Controller
rxApp.controller( 'WizardCtrl', function ( $scope, $http, $routeParams, $location, FileUploader ) {
$scope.test_var = 'please work!';
)};
Routes
rxApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/one', {
templateUrl: 'templates/one.html',
controller: 'WizardCtrl'
}).
when('/two', {
templateUrl: 'templates/two.html',
controller: 'WizardCtrl'
}).
otherwise({
redirectTo: '/one'
});
}
]);
Controllers are disposed when transmuting routes.
As for Best Practice you should create a Service to handle that data. You should not use controllers to carry data between views. In your case, the problem is Controllers are disposed when transmuting routes.
See the angular docs on how to use controllers correctly. http://docs.angularjs.org/guide/dev_guide.mvc.understanding_controller
The problem is the making of model variables.
You have to have a dot in model. Make your model point to an object.
So in your controller do like this -
rxApp.controller('WizardCtrl',function($scope, $http, $routeParams,$location, FileUploader){
$scope.test ={
var : 'please work!'
};
)};
View (One.html)
<input ng-model="test.var" />
<span ng-bind="test.var"></span>
HTML
<body>
<div ng-app="rxApp" ng-controller="WizardCtrl">
<div class="ng-view">
</div>
<div class="sidebar">
<span ng-bind="test.var"></span>
</div>
</div>
</body>
To read more about scope go through this UnderStanding Scopes
Related
I have the following code structure
index.html
<body ng-app="jobPortalApp" ng-controller="mainController">
<div ui-view></div>
</body>
then following is my homepage.html template
<div id=header>
</div>
<div ui-view>
<input type="text" ng-model="test">Test</input>
<input type="submit" ng-click="signup()">
</div>
<footer>
</footer>
my angular module file is as follows
var jobPortalApp = angular.module('jobPortalApp',['ui.router']);
jobPortalApp.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider
.otherwise('/');
$stateProvider
.state('home',
{
url:'/',
templateUrl: './templates/homepage.html',
controller: 'controllerHome'
})
}).controller('mainController', function(){});
following is my home controller
jobPortalApp.controller('controllerHome',function($scope, $http) {
$scope.test="";
$scope.signup = function() {
console.log($scope.test);
}
});
Required:
I want the changed value of test in my controllerHome after the user clicks on signup
Problem:
console.log outputs blank and if I remove $scope.test="";then outputs undefined. I want the changed value of test in my controller.
You usually shouldn't bind directly to $scope due to issues with prototypal inheritance. When trying to read a value from a child scope, if the value doesn't exist you end up reading from the parent scope. But as soon as you write, you write to the child scope. Does it work if you bind to an object instead?
$scope.data = {
test: ""
};
<input type="text" ng-model="data.test">Test</input>
As an alternative, you may also want to look at the controllerAs option for your route:
controllerAs: "ctrl"
Then in your controller:
this.test = "";
And in your template:
<input type="text" ng-model="ctrl.test">Test</input>
I'm a newbie in angularjs. I'm trying to build a simple app which contain login page and dashbboard page.
Now, I got a problem with updating html template when rootScope changed.
Here is my component template :
<!-- show dashboard page app >
<div layout="column">
<div ng-show="$rootScope.isAuthenticated">
<pm-header></pm-header>
<div layout="row">
<pm-sidebar></pm-sidebar>
<div layout="column" class="sitecontent" layout-padding>
<md-content ui-view></md-content>
</div>
</div>
</div>
<!-- show login page app >
<div ng-hide="$rootScope.isAuthenticated">
<pm-homeheader></pm-homeheader>
<div layout="row">
<md-content ui-view flex></md-content>
</div>
</div>
</div>
Login blockcodes :
'use strict'
export default ['$rootScope', '$state', '$http', '$window', function($rootScope, $state, $http, $window) {
this.user = {};
this.login = () => {
$http.post('./api/auth/login', this.user)
.success(function(data, status, headers, config) {
$window.sessionStorage.token = data.token;
$rootScope.user = data.user;
$rootScope.isAuthenticated = true;
$state.go('home');
})
.error(function(data, status, headers, config) {
delete $window.sessionStorage.token;
})
};
}]
My problem is when I logged and go back to home state, the ui-router updated the template to ui-view, but the ng-show="$rootScope.isAuthenticated" didn't reflect the changes on html, it show the block codes of home page instead of dashboard page.
Can anyone help me for this case, many thanks.
Use:
ng-show="$root.isAuthenticated"
You can't access $rootScope in the template, when you access it in a controller you inject it in. $root works because when angular creates a rootScope it sets a reference to $root to itself so its just like accessing any other property on the scope.
Refer to AngularJS rootScope code Line 135: https://github.com/angular/angular.js/blob/v1.3.6/src/ng/rootScope.js#L135
You should not use either $scope OR $rootScope while using variable for binding on HTML, so as soon as variable update in $rootScope, isAuthenticated will be taken from $rootScope while evaluating value of ng-show.
ng-show="isAuthenticated"
Though directly using $rootScope, wouldn't consider as a good practice. I'd suggest you to create a service/factory with a name userService that will have shareable user information among-st angular components.
I am currently creating an app that has a nav bar. I want a particular function to be invoked every time the submit button in the nav bar is pressed regardless of route/view. I am having trouble because here in my routes file I have created associations that changed based on route. The form is found in <form class="pure-form" ng-submit="somefunc()">
routes.js
angular.module('LiveAPP', ['ngRoute',
'LiveAPP.main',
'LiveAPP.signUp',
'LiveAPP.artist'])
.config(function($routeProvider, $httpProvider) {
$routeProvider
.when('/', {
templateUrl : '/home.html',
controller : 'mainCtrl'
})
.when('/signup',{
templateUrl : '/signup.html',
controller : 'signUpCtrl'
})
.when('/artist',{
templateUrl : '/artistpage.html',
controller : 'artistCtrl'
})
})
index.html
<body ng-app='LiveAPP'>
<div class="header">
<form class="pure-form" ng-submit="somefunc(field)">
<input ng-model="field" type="text" placeholder="Artist" name="field">
<button type="submit">Search</button>
</form>
Sign Up
artistPage
</div>
<div ng-view></div>
</body>
mainCtrl
angular.module('LiveAPP.main',[])
.controller('mainCtrl', ['$scope','$http', '$location',mainCtrl]);
function mainCtrl($scope,$http,$location){
$scope.somefunc = function(searchvalue){
console.log(searchvalue)
}
};
Right now the submit button is associated with the mainCtrl which is related to the home.html. Any ideas?
In general you have a couple approaches:
If you need some logic to be available in more than one controller you can create a service and inject it to your controllers.
You can implement controller inheritance.
There are a couple ways to implement controller inheritance.
This is one example of how to do that:
var app = angular.module('myApp', []);
app.controller('MainCtrl', function() {
this.methodclick=function(){
alert('I am Parents')
}
});
app.controller('ChildCtrl', function($controller) {
var ChildCtrl=this;
ChildCtrl.child = $controller('MainCtrl',{});
});
But in my opinion it is better to implement a service.
I have an app that behaves normally when I follow links on the page, but if I use the browser's back and forward buttons, it breaks in the following ways:
It sends a request to the server, but only on "Back".
The template is not rendered at all.
In addition, when I hit "back" to go from page B to page A, chrome's "refresh/stop" button flickers between the top options rapidly, and repeated attemptes to go back and forward causes longer flickering.
Here are the code snippets that I think are relevant:
Edit: I'm working on a plnkr but the site is currently not working. I'll update when it's up and I can verify the bad behavior
Edit 2: Here is the plnkr, but it has problems. It can't find the templateUrls specified in app.js routing, not sure why. Here's the code anyway http://plnkr.co/edit/6cQtnvLi10sJKW8jVzVM
Edit 3: With the help of a friend, I think the problem is coming from using turbo-links on rails 4. I can't test it right now, but when I can I'll post an answer if it works.
file: app.js
window.App = angular.module('app', [
'templates',
'ui.bootstrap'
])
.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when('/', {
controller: 'HomeCtrl',
templateUrl: 'home.html'
})
.when('/bars', {
controller: 'BarsPublicCtrl',
templateUrl: 'bars_public.html'
})
.when('/bars/:bar_name', {
controller: 'BarsDetailPublicCtrl',
templateUrl: 'bars_detail_public.html'
})
.otherwise({redirectTo: '/'});
}]);
file: bars_public_ctrl.js
App.controller('BarsPublicCtrl', ['$scope', '$location', 'BarsPublicDataFactory',
function($scope, $location, BarsPublicDataFactory) {
// memoization
$scope.bars = $scope.bars || BarsPublicDataFactory.getBars();
}
]);
BarsPublicDataFactory just returns a static array of fake data, same with the factory in the following snippet
file: bars_detail_public_ctrl.js
App.controller('BarsDetailPublicCtrl', ['$scope', '$routeParams', 'BarsDetailPublicDataFactory',
function($scope, $routeParams, BarsDetailPublicDataFactory) {
$scope.bar = {};
$scope.bar.name = $routeParams.barId;
$scope.barDetails = BarsDetailPublicDataFactory.getBaz($routeParams.bar_name);
$scope.Bazs = BarsDetailPublicDataFactory.getBazs();
}]);
file: bars_public.html
<div class="container">
<div ng-repeat="bar in bars">
<div class="row">
<div class="col-sm-12">
<a href="/bars/{{bar.name}}">
<h4 style="display:inline;">{{ bar.name }}</h4>
</a>
</div>
</div>
<hr />
</div>
</div>
file: bars_detail_public.html
<select ng-model="searchSelect.style" style="width:100%;">
<option value='' selected>All</option>
<option ng-repeat="baz in bazs">{{baz}}</option>
</select>
<div>
<accordion close-others="true">
<accordion-group ng-repeat="foo in foos | filter:searchSelect">
<accordion-heading>
<div>
<h3>{{foo.name}}</h3>
<em>{{foo.style}}</em>
</div>
</accordion-heading>
</accordion-group>
</accordion>
</div>
If you need anything else, let me know.
It turns out that the problem was caused by turbolinks with Rails 4. I failed to mention it because I didn't realize it was important.
I don't know exactly what caused it, but turbolinks injects some javascript, and as best as I can tell, it highjacks some events that cause the page to reload when you use the browse buttons which was breaking my app.
So I followed this advice: http://blog.steveklabnik.com/posts/2013-06-25-removing-turbolinks-from-rails-4
and it worked just fine! Hope someone else can benefit.
befoure:
[installed]jquery_turbo_links
[installed]turbolinks
alter:
[installed]jquery_turbo_links
[removed]turbolinks
It worked!
given the controller
function ctl($scope, $http) {
$scope.postForm = function() {
console.log("submitting form")
}
}
and the view
<form name="pform" ng-show="!error.Show">
<div ng-view></div>
<button type='button' value='Save' ng-click="postForm()" />
</form>
The controller method postForm doesn't get called, however, if i move the form tag into the view the method is called. Is there a reason that this doesn't work as I expect it to? Is there another way to accomplish the goal of sharing the form controls across different views?
Update
my module and routeProvider are configured like this:
angular.module("profilemodule", [])
.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when("/info", { templateUrl: '/partials/profile/info.html', controller: ProfileController })
.when("/user", { templateUrl: '/partials/profile/user.html', controller: ProfileController })
.when("/introduction", { templateUrl: '/partials/profile/editor.html', controller: ProfileController })
.otherwise({ redirectTo: '/info' });
}]).run(function ($rootScope, $location) {
$rootScope.location = $location;
})
and the page includes some nav elements which are set based on the location service like so:
<div class="row">
<div class="offset2 span10">
<ul class="nav nav-pills">
<li ng-class="{active: location.$$path.substring(0, '/info'.length) == '/info'}"><a href="#/info" >Information</a></li>
<li ng-class="{active: location.$$path.substring(0, '/user'.length) == '/user'}"><a href="#/user" >User</a></li>
<li ng-class="{active: location.$$path.substring(0, '/intro'.length) == '/intro'}"><a href="#/intro" >Introduction</a></li>
</ul>
</div>
</div>
<form name="pform" method="POST" ng-show="!error.Show">
<div ng-view></div>
<button type='button' value='Save' ng-click="postForm()" />
</form>
the ng-class statements works perfectly, is it because I've set the location property of $scope in the module's run method?
thanks,
jason
ng-view with routing creates a new scope with the controller, and you can't reach a child scope. Your submit action lies in the parent scope and the form data lies in the child scope (created by ng-view).
If you want to use common form controls, you can use ng-include, this directive gets template it and renders that in the current scope.
Move your form controls to a new template, then include them in all of your forms.
API reference:
http://docs.angularjs.org/api/ng.directive:ngInclude