CODEWITHSUNDEEP
angularjscontroller
Aloïs de La Comble
Aloïs de La Comble

Reputation: 839

Programmatically creating new instances of a controller

So here is my problem, I have some functions/variables in a parent controller

function parentController($scope) {

    $scope.numberOfChildren = $scope.numberOfChildren + 1 || 1;
    console.log($scope.numberOfChildren);

    $scope.someFunction = function(argument) {
        // do stuff
        $scope.someVariable = result of the function
    }
}

I am calling this controller in two other controllers that are directives controllers and are called in the same view 

function firstChildController ($scope, $controller) {

    var aVariable = 1;
    $scope.otherVariable = 10;

    $controller('parentController', {$scope: $scope});

    $scope.someFunction(aVariable);
}

function secondChildController ($scope, $controller) {

    var aVariable = 6;
    $scope.otherVariable = 11;

    $controller('parentController', {$scope: $scope});

    $scope.someFunction(aVariable);
}

What I want, is not to share the parent scope for the two children. Right now, there is only one instance of the parent controller and so when I call two directives depending on it on the same view, I get $scope.numberOfChildren === 2. What I want is this parent controller to be loaded twice but have separated scopes ($scope.numberOfChildren === 1 in each child controller)

I managed to do this using ng-controller in the view template and deleting the $controller calls but I want to do it programmatically. (I don't want to have to write the same ng-controller code each time I am calling the directive).

<div ng-controller="parentController">
    <first-directive></first-directive>
</div>
<div ng-controller="parentController">
    <second-directive></second-directive>
</div>

Finally, to keep homogeneity in the code of the project, I'd rather not use the this and vm stuff to do the job if it possible.

Upvotes: 2

Views: 1748

Answers (2)

Vu Quyet
Vu Quyet

Reputation: 1705

What you expect is exactly same with the way system run: scope is not sharing between two controller.

When you use a ng-controller in html, a new scope (controller instance) will be created. From your code above, two controller instance will be created. You can see it by adding {{$id}} to html and see id of scope instance.

<div ng-controller="parentController">
    {{$id}}
    <first-directive></first-directive>
</div>
<div ng-controller="parentController">
    {{$id}}
    <second-directive></second-directive>
</div>

If you see {{numberOfChildren == 2}} mean that your code is wrong in somewhere, not by sharing scope issue.

Upvotes: 0

Alexander Kravets
Alexander Kravets

Reputation: 4395

parentController does NOT have its own scope, it operates on the $scope you're passing to it when you instantiate it this way $controller('parentController', {$scope: $scope}).

Checkout this simple demo fiddle.

The problem in your case might be caused by directives sharing the same scope and, thus, passing the same scope to the parent controller.

Upvotes: 1

Related Questions