CODEWITHSUNDEEP
angularjsangular-ngmodel
Howard Zoopaloopa
Howard Zoopaloopa

Reputation: 3822

ngModel Changing to Child Scope

When I edit a value through an input field that is bound (perhaps bound isn't the right term) to a parent controller's scope, it seems to re-bind to the child controller's scope. This eliminates my ability to affect the value with functions built into the parent scope (clicking the button in the example) which works BEFORE I edit the input field manually.

E.g: 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example - example-example85-production</title>


    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.1/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.1/angular-animate.js"></script>

    <script type="text/javascript"> 
        angular.element(document.getElementsByTagName('head')).append(angular.element('<base href="' + window.location.pathname + '" />'));
    </script>


</head>

<body ng-app="inputExample">
    <script>
        angular.module('inputExample', [])
           .controller('ExampleController', ['$scope', function($scope) {
                        $scope.val = '1';

                        $scope.$watch('val',function(){
                            alert($scope.val);
                        });
                        $scope.set_val = function(){
                            $scope.val = 2;      
                        }
            }])
            .controller('childController',['$scope', function($scope){}]);
    </script>
    <form name="testForm" ng-controller="ExampleController">
        <div ng-controller="childController">
            <input ng-model="val" />
            <input type="button" ng-click="set_val()" value="change value"/>
        </div>
    </form>
</body>
</html>

http://plnkr.co/edit/cMz9dIMgnyImxQ0va7Wn?p=preview

Upvotes: 0

Views: 1220

Answers (1)

Joe Enzminger
Joe Enzminger

Reputation: 11190

childController creates a new scope that prototypically inherits from the ExampleController scope. Angular's use of prototypical inheritance and scope can be confusing, especially if you assume that prototypical inheritance behaves as inheritance does in other languages (C#, Java, etc).

If ExampleController.scope.val = 2, then the input will be initialized with the value 2, however, when the input modifies the value, it does so by setting

childController.val = 2.

Now both ExampleController.scope and childController.scope have a property val with a value of 2, but they are completely separate and not bound together.

This is why angular recommends using "dot notation" for models.

However, your childController looks to be unnecessary in your example and removing it will fix your problem. If you can't remove it (because your actual implementation is doing something with it, then change your models to "dot" notation.

<body ng-app="inputExample">
    <script>
        angular.module('inputExample', [])
           .controller('ExampleController', ['$scope', function($scope) {
                        $scope.data = {};
                        $scope.data.val = '1';

                        $scope.$watch('data.val',function(){
                            alert($scope.data.val);
                        });
                        $scope.set_val = function(){
                            $scope.data.val = 2;      
                        }
            }])
            .controller('childController',['$scope', function($scope){}]);
    </script>
    <form name="testForm" ng-controller="ExampleController">
        <div ng-controller="childController">
            <input ng-model="data.val" />
            <input type="button" ng-click="set_val()" value="change value"/>
        </div>
    </form>
</body>
</html>

Here is the working Plunk.

Upvotes: 3

Related Questions