Issue
View 1:
<div ng-controller="ctrl1">
<button ng-click="goToForm ({'name':'aaa'})">
</button>
</div>
ctrl1:
$scope.selectedList = {
name: ""
};
$scope.goToForm = function(e) {
$scope.selectedList.name = e.name;
$state.go('view2');
console.log(e); // prints updated value
};
View 2:
<div ng-controller="ctrl1">
<input
id="name"
name="name"
type="text"
ng-model="selectedList.name"
ng-readonly="true"
/>
</div>
But the input box is always empty, even though to get to the view the goToForm() is called. Why doesn’t it update the HTML value?
Views are changed with ui.router’s $state.
Solution
You are doing it wrong, you are changing the state
so you must pass the data, else you’ll lose it.
$scope.goToForm = function(e) {
var obj = {name: e.name};
$state.go('view2',obj);
console.log(e); // prints updated value
};
and do put one init
function inside ctrl1.js
which checks if there are any values passed as $stateParam
. If there are any, assign it accordingly.
app.controller('ctrl1',function($stateParams){
init(); // your first line of controller
// then all your code from here
function init(){
if($stateParams.name) {
$scope.selectedList.name = $stateParams.name;
}
}
})
OR you can use ng-init="init()"
on the <div ng-init="init()">
Answered By – Shashank Vivek
Answer Checked By – Dawn Plyler (AngularFixing Volunteer)