Variable doesn't change value in angular controller

Question

I have html page with

<div ng-controller="MyCtrl">
  <div ng-view>Some content</div>

  myVar: {{myVar}}
</div>

And angular controller:

myModule.controller('MyCtrl', function($scope, $location) {
   $scope.myVar = false;

   $scope.someAction = function() {
     $location.path('/anotherPath');
     $scope.myVar = true; // changes in controller, but not in view
   }
});

My module is

var myModule = angular.module('myModule', ['ngRoute']).config(function ($routeProvider) {

$routeProvider
     .when('/anotherPath', {
       templateUrl: 'anotherPath.html',
       controller: 'MyCtrl'
     })

     .otherwise({
         redirectTo: '/anotherPath.html'
     })
});

anotherPath.htmlcontains only

<input data-ng-click="someAction()" type="button" class="btn" value="Some action">

After clicking on this input controller changes path, but in view value of myVar is still false. Why?

Try putting "$scope.myVar = true;" statement before the "$location.path" — Fizer Khan, Feb 27 '14 at 08:15
Does the template from `anotherPath` have another controller defined for it that would be a child scope and hence doesn't have `myVar` in its $scope? — Stephen Kaiser, Feb 27 '14 at 08:15
@StephenKaiser It should inherit from MyCtrl anyway, but it might have redeclared `myVar`? — CodingIntrigue, Feb 27 '14 at 08:19
@RGraham You're right. If he has redeclared it like you pointed out, it overrides the parent scope's value and he will need to use $scope.$parent.myVar. @baxxabit Can you post your template from `anotherPath`? That might give us more information to help you. — Stephen Kaiser, Feb 27 '14 at 08:27
Rather than using $scope.$parent.myVar, declare it like $scope.model.myVar. That way the child controller will be able to change it. More on that here: http://stackoverflow.com/a/14049482/957731 — ivarni, Feb 27 '14 at 08:37
$scope.$parent will be extremely brittle, as it will break as soon as the inheritance-chain is changed. — ivarni, Feb 27 '14 at 08:37
@StephenKaiser, sure, my template contains only ``, nothing else — uladzimir, Feb 27 '14 at 08:39

score 2 · Accepted Answer · answered Feb 27 '14 at 08:49

2

Here, you have defined your controller twice. Once on the parent div:

<div ng-controller="MyCtrl">

And once on the route for /anotherPath:

$routeProvider
     .when('/anotherPath', {
       templateUrl: 'anotherPath.html',
       controller: 'MyCtrl' <-- This will be assigned to <div ng-view>
     })

Leaving you with something like:

<div ng-controller="MyCtrl">
    <div ng-view ng-controller="MyCtrl">
    </div>
</div>

Therefore, when you call $scope.someAction() you are calling the function defined on the controller assigned to your inner view, rather than the function defined on the parent controller.

You should give your View its own unique controller in the route definition:

Angular:

$routeProvider
     .when('/anotherPath', {
       templateUrl: 'anotherPath.html',
       controller: function($scope) {
           // You don't necessarily need an implementation here
       }
     })

HTML:

<div ng-controller="MyCtrl">
  <div ng-view>Some content</div>

  myVar: {{myVar}}
</div>

answered Feb 27 '14 at 08:49

CodingIntrigue

75,930
30
170
176

Oh, thanks, I missed this point. I can remove ng-controller declaration from html, will it work? – uladzimir Feb 27 '14 at 08:54
No, you can't do that either because then `myVar` would not be defined in *any* scope. Simply set the controller in your route definition to an empty implementation, it will by default inherit from the parent `MyCtrl` so you have full access to its functions and variables – CodingIntrigue Feb 27 '14 at 08:55
Thanks, I'm a newbie in angular :) Is it necessary or can I remove it `controller: function($scope) {}` – uladzimir Feb 27 '14 at 08:57
No problem, it's a tough framework to get to grips with! You'd need to check the docs to confirm, but I think a view must have a controller :) – CodingIntrigue Feb 27 '14 at 08:58
Great, thanks again, I haven't skills in english to express my appreciation :) – uladzimir Feb 27 '14 at 08:59
1

Working as expected now. controller declaration in this case is optional – uladzimir Feb 27 '14 at 09:02

Variable doesn't change value in angular controller

1 Answers1