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，但它们是完全独立的，不会绑定在一起。

这就是角度建议使用＆＃34;点符号＆＃34;对于模型。

但是，您的childController看起来在您的示例中是不必要的，删除它将解决您的问题。如果您无法将其删除（因为您的实际实施正在使用它，请将模型更改为＆＃34; dot＆＃34;表示法。

<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更改为子范围

1 个答案: