ngModel 更改为子范围

Question

当我通过绑定（也许绑定不是正确的术语）到父控制器范围的输入字段编辑值时，它似乎重新绑定到子控制器的范围。这消除了我使用父作用域中内置的函数（单击示例中的按钮）影响值的能力，该函数在我手动编辑输入字段之前有效。

例如：

<!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

Answer 1

childController 创建一个新的作用域，其原型继承自 ExampleController 作用域。 Angular 对原型继承和作用域的使用可能会造成混淆，尤其是当您假设原型继承的行为与其他语言（C#、Java 等）中的继承行为相同时。

如果ExampleController.scope.val = 2，则输入将初始化为值2，但是，当输入修改值时，它通过设置

来实现

childController.val = 2.

现在 ExampleController.scope 和 childController.scope 都有一个值为 2 的属性 val，但它们是完全独立的，没有绑定在一起。

这就是 angular 建议对模型使用 "dot notation" 的原因。

但是，您的 childController 在您的示例中似乎是不必要的，删除它会解决您的问题。如果你不能删除它（因为你的实际实现正在用它做一些事情，那么将你的模型更改为 "dot" 符号。

<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 是工作中的 Plunk。

ngModel 更改为子范围

ngModel Changing to Child Scope

angularjs

angular-ngmodel