AngularJS: Modifying the parent scope from a controller inside an ng-switch

Question

AngularJS: Modifying the parent scope from a controller inside an ng-switch

I've noticed that I can change a model value from a child controller, but when the child controller is inside an ng-switch, this functionality doesn't seem to work. Why is that? To illustrate this issue, I have created an example.

One workaround for this problem is to use the dot notation in the model name, such as bunnies.kills. Do you think this is a bug or just a feature of Angular? I'm using Angular 1.0.6.

javascript angularjs angularjs-scope angularjs-controller angularjs-ng-switch

Answer 1

Answer №1

To adapt your code structure for child controllers, you will need to modify the following:

$scope.$parent.kills++;

to

$scope.$parent.$parent.kills++;

Explanation: The scope of MainCtrl is the parent scope of SimpleParentCtrl, but it acts as the grandparent scope of Step1Ctrl and Step2Ctrl. It's important to note that when using ng-switch, a new scope is created, and then each instance of Step1Ctrl and Step2Ctrl generates a child scope within the ng-switch.

Note: Whenever the 1 or 2 button is clicked, both the ng-switch and its corresponding child controller receive a fresh scope.

Also: If you're curious about how the ng-switch directive establishes its own scope without a specific scope property, it manually creates a new scope in its link method using scope.$new(). Directives like ng-include, ng-switch, ng-repeat, and ng-view all create new scopes in a similar manner, either within the link method or through the returned function from the compile method.

Resources:

https://github.com/angular/angular.js/wiki/The-Nuances-of-Scope-Prototypal-Inheritance http://www.youtube.com/watch?v=ZhfUv0spHCY&feature=youtu.be&t=30m

Answer 2

To adapt your code structure for child controllers, you will need to modify the following:

$scope.$parent.kills++;

to

$scope.$parent.$parent.kills++;

Explanation: The scope of MainCtrl is the parent scope of SimpleParentCtrl, but it acts as the grandparent scope of Step1Ctrl and Step2Ctrl. It's important to note that when using ng-switch, a new scope is created, and then each instance of Step1Ctrl and Step2Ctrl generates a child scope within the ng-switch.

Note: Whenever the 1 or 2 button is clicked, both the ng-switch and its corresponding child controller receive a fresh scope.

Also: If you're curious about how the ng-switch directive establishes its own scope without a specific scope property, it manually creates a new scope in its link method using scope.$new(). Directives like ng-include, ng-switch, ng-repeat, and ng-view all create new scopes in a similar manner, either within the link method or through the returned function from the compile method.

Resources:

https://github.com/angular/angular.js/wiki/The-Nuances-of-Scope-Prototypal-Inheritance http://www.youtube.com/watch?v=ZhfUv0spHCY&feature=youtu.be&t=30m

Answer 3

Answer №2

When utilizing ng-switch, a new child scope is generated, explaining why @sh0ber's solution is effective in this scenario. Typically, it is recommended that models be accessed within controller scopes (as reference objects) rather than as primitives. Therefore, employing a . notation is considered a "best practice".

This behavior should not be interpreted as a bug, nor should it be viewed as a feature. It simply reflects the workings of JavaScript prototypal inheritance with primitives.

Answer 4

When utilizing ng-switch, a new child scope is generated, explaining why @sh0ber's solution is effective in this scenario. Typically, it is recommended that models be accessed within controller scopes (as reference objects) rather than as primitives. Therefore, employing a . notation is considered a "best practice".

This behavior should not be interpreted as a bug, nor should it be viewed as a feature. It simply reflects the workings of JavaScript prototypal inheritance with primitives.

Answer 5

Answer №3

In dealing with this issue, I propose a different approach.

Instead of relying on $scope.$parent, my suggestion is to centralize all bunny-killing logic within a shared service/model.

Addtionally, it's advisable to steer clear of referencing parent views/controllers. Doing so can complicate code reuse and debugging as the project scales. While a parent may have knowledge of its children, a child should have minimal awareness of its parent.

For an updated Plunk, please see: http://plnkr.co/edit/PLDbfU8Fu7m59A42qdR6?p=preview

HTML

<body ng-controller="MainCtrl">
    <p>
        Dead bunnies: <strong>{{Elmer.deadWabbits}}</strong>
    </p>
    <div ng-controller="SimpleParentCtrl">
        <button ng-click="Elmer.killTheWabbit()">Kill from simple parent gun</button>
    </div>
    <hr>
    <div ng-switch="" on="step">
        <div ng-switch-when="first" ng-controller="Step1Ctrl">
            <button ng-click="Elmer.killTheWabbit()">Kill from 1 tab gun</button>
        </div>
        <div ng-switch-when="second">
            <div ng-controller="Step2Ctrl">
                <button ng-click="Elmer.killTheWabbit()">Kill from 2 tab gun</button>
            </div>
        </div>
    </div>
    <hr>
    <p>
        <button ng-click="changeStep('first')">1</button> <button ng-click="changeStep('second')">2</button>
    </p>
</body>

JS

angular.module('plunker', []).
service("Elmer", [function() {
    this.deadWabbits = 0;
    this.killTheWabbit = function() {
        this.deadWabbits++;
    };
}]).
controller('MainCtrl', function($scope, Elmer) {
  $scope.Elmer = Elmer;
  $scope.step = 'first';
  $scope.changeStep = function(name){
    $scope.step = name;
  };
}).
controller('SimpleParentCtrl', function() {}).
controller('Step1Ctrl', function() {}).
controller('Step2Ctrl', function() {});

Answer 6

In dealing with this issue, I propose a different approach.

Instead of relying on $scope.$parent, my suggestion is to centralize all bunny-killing logic within a shared service/model.

Addtionally, it's advisable to steer clear of referencing parent views/controllers. Doing so can complicate code reuse and debugging as the project scales. While a parent may have knowledge of its children, a child should have minimal awareness of its parent.

For an updated Plunk, please see: http://plnkr.co/edit/PLDbfU8Fu7m59A42qdR6?p=preview

HTML

<body ng-controller="MainCtrl">
    <p>
        Dead bunnies: <strong>{{Elmer.deadWabbits}}</strong>
    </p>
    <div ng-controller="SimpleParentCtrl">
        <button ng-click="Elmer.killTheWabbit()">Kill from simple parent gun</button>
    </div>
    <hr>
    <div ng-switch="" on="step">
        <div ng-switch-when="first" ng-controller="Step1Ctrl">
            <button ng-click="Elmer.killTheWabbit()">Kill from 1 tab gun</button>
        </div>
        <div ng-switch-when="second">
            <div ng-controller="Step2Ctrl">
                <button ng-click="Elmer.killTheWabbit()">Kill from 2 tab gun</button>
            </div>
        </div>
    </div>
    <hr>
    <p>
        <button ng-click="changeStep('first')">1</button> <button ng-click="changeStep('second')">2</button>
    </p>
</body>

JS

angular.module('plunker', []).
service("Elmer", [function() {
    this.deadWabbits = 0;
    this.killTheWabbit = function() {
        this.deadWabbits++;
    };
}]).
controller('MainCtrl', function($scope, Elmer) {
  $scope.Elmer = Elmer;
  $scope.step = 'first';
  $scope.changeStep = function(name){
    $scope.step = name;
  };
}).
controller('SimpleParentCtrl', function() {}).
controller('Step1Ctrl', function() {}).
controller('Step2Ctrl', function() {});

Answer 7

Answer №4

To prevent this issue, consider using the period in model names, such as bunnies.kills. Is this a bug or intended feature?

This concept has been discussed multiple times: https://github.com/angular/angular.js/wiki/The-Nuances-of-Scope-Prototypal-Inheritance and also in mhevery's video

Answer 8

To prevent this issue, consider using the period in model names, such as bunnies.kills. Is this a bug or intended feature?

This concept has been discussed multiple times: https://github.com/angular/angular.js/wiki/The-Nuances-of-Scope-Prototypal-Inheritance and also in mhevery's video

AngularJS: Modifying the parent scope from a controller inside an ng-switch

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Leveraging the div id attribute in an HTML element

What is the best way to extract specific values from a JSON array of objects using JavaScript?

There is an abundance of brief PHP documents

Sorting an array of strings based on user input using Vue.js

Find the ID of the clicked table row using HTML and JavaScript

React Native encounters issues with removing the reference to the callback attribute upon unmounting

Starting jQuery on embedded websites

Utilizing AngularJS to display a table with Rowspan functionality and the ability to filter elements

Secure your Spring Sessions with Websocket and REST Token Security features

jQuery is optimized to work specifically with select id tags

Tips for populating a DOJO Select using JSON data that includes various parameters instead of just label and value

Creating a list of identical elements with shared attribute values using nightwatch.js or JavaScript - a step-by-step guide

Designing an architecture for a Java, Android, and database application - what will the final app's appearance be

Having difficulty verifying the elements of an associative array after using json_decode

In my React JS class component, I am looking to have the image display switch each time the button is clicked

Is it possible to use WebRTC on mobile browsers without downloading a separate application?

The implementation of pipelining for server-side processing

Alternative to updating object coordinates in Fabric JS 1.7.9 - seeking solutions for migration challenges

Difficulty in altering the background of an input box

Transforming the date format in VUE-JSON-EXCEL