Explore our sites

Stack Exchange
tour help careers 2.0
Take the tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I have a partial view that is using angular. How do I change a variable in the MainController from PartialController? I am not sure how to create the interdependence...

angularApp.controller('MainController', ['$scope', '$http', '$compile', function MainController($scope, $http, $compile) { 
    $scope.myVariable = "0"; 

    //Had the following before refactoring due  to repetitive code.
    //Code now in PartialController
    //$scope.searchData = function ($event) {
    //    //code 
    //    $scope.myVariable = "1"; 
    //}

}]);

angularApp.controller('PartialController', ['$scope', '$http', '$compile', function PartialController($scope, $http, $compile) { 
    $scope.searchData = function ($event) {
        //code 
        $scope.myVariable = "1"; 
    }
}]);
share|improve this question
 
Please add a fiddle. But probably you should try with the rootscope. –  Waxolunist yesterday
add comment

3 Answers

up vote 2 down vote accepted

For sake of completeness, there are at least 3 ways:

  1. With a service as @tymeJV suggested (BEST answer)

    app.factory('dataStore', function () {
    var dataStore = {};
    return dataStore;
});

app.controller('ParentCtrl', function($scope, dataStore) {
    $scope.dataStore = dataStore;
    $scope.dataStore.foo = 'bar';
});

app.controller('ChildCtrl', function($scope, dataStore) {
    dataStore.foo = 'not bar anymore';
});

  2. With an object reference on the parent scope (A bit hackish)

    app.controller('ParentCtrl', function($scope) {
   $scope.data = {
      foo: 'bar'
   };
});

app.controller('ChildCtrl', function($scope) {
   $scope.data.foo = 'not bar anymore';
});

  3. With $parent (equally hackish)

    app.controller('ParentCtrl', function($scope) {
   $scope.foo = 'bar';
});

app.controller('ChildCtrl', function($scope) {
   $scope.$parent.foo = 'not bar anymore';
});

Why are #2 and #3 hackish?

Because they create a dependency in your ChildCtrl of having it always be a child of the ParentCtrl... otherwise it will break.

So why include #2 and #3 at all?

For a few reasons:

  • Directives can have controllers, and required parent directives. Because of this, there are cases where you can "safely" use $parent or scope inheritance because you'll always know that ChildCtrl has ParentCtrl as a parent.
  • Sometimes you just need to hack something together.
  • As I said, for the sake of completeness.
share|improve this answer
2  
Way better explanation, +1 for that. –  tymeJV yesterday
 
good answer, although in #2, it's not really dependent on the ParentCtrl, so it's not as "hackish" as #3, at least not in the way you described it. –  NicolasMoise yesterday
 
@NicolasMoise Well it's dependent on some parent scope having a property of data set on it already, otherwise you'll get reference errors. –  blesh yesterday
1  
I like the descriptive response.. thanks –  MrM 23 hours ago
add comment
up vote 3 down vote

This is a prime use for a service that can be injected to controllers when you need it and pull data from it:

app.factory("myService", function() {
    var myVariable = null;
    return {
        get: function() {
            return myVariable;
        },
        set: function(value) {
            myVariable = value;
        }
    }
});

//Inject
angularApp.controller('MainController', ['$scope', '$http', 'myService', '$compile', function MainController($scope, $http, $compile, myService) {
    myService.set(3);
});
share|improve this answer
1  
+1 this answer is correct. I just added another answer to be thorough. –  blesh yesterday
add comment
up vote 1 down vote

tymeJV's answer is correct and is probably best practice in this case. I believe the reason it wasn't working in your example is because in Javascript, primitives (strings, numbers, booleans) are passed by value, whereas objects are passed by reference.

i.e. if you had $scope.obj.myVariable=1 in your main controller and edit $scope.obj.myVariable in your child controller, you should see the new value in both. (this is kinda #2 in blesh's answer). This is a common source of "bugs" in Angular so it's good to be aware of it.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.