控制器继承在angularjs中是如何工作的

How controller inheritance works in angularjs

本文关键字：工作 何工作 继承 angularjs 控制器      更新时间：2023-09-26

我试图从主控制器继承一些属性，但不像我预期的那样工作。当我改变主控制器中的数据值时，它也会更新子控制器的值。一旦我专注于子控制器，然后开始工作，因为我例外。我有一个计数器在主控制器，我想存储由用户输入的数字，但当用户输入主控制器的计数它改变子控制器的计数。为什么它的更新子类。在angularjs中继承是如何工作的

<body ng-app="myapp">
        <div ng-controller="MainController">
        <label>Count for main controller</label>
        <input type="text" ng-model="count">
            <div ng-controller="subController">
            <label> count for sub controller</label>    
                <input type="text" ng-model="count">
            </div>
            {{count}}
        </div>
    </body>

<script>
var myapp=angular.module('myapp',[]);
myapp.controller('MainController',function($scope){
    $scope.count=0;
    //other properties
});
myapp.controller('subController',function($scope){
    //other properties  
});
</script>

AngularJS在控制器中使用原型继承，这就是为什么当在基类中改变值时，它也会在子类中改变。子类直接从基类访问属性。

当我们关注子控制器时，它创建了自己的copy属性，并与基类中的属性断开连接。这是无法阻止的。

无论如何，我们可以强制更新基类属性作为子类更新属性购买分配对象到$scope而不是直接属性。

<body ng-app="myapp">
        <div ng-controller="MainController">
        <label>Count for main controller</label>
        <input type="text" ng-model="val.count">
            <div ng-controller="subController">
            <label> count for sub controller</label>    
                <input type="text" ng-model="val.count">
            </div>
            {{val.count}}
        </div>
    </body>

<script>
var myapp=angular.module('myapp',[]);
myapp.controller('MainController',function($scope){
    $scope.val={count:0}
    //other properties
});
myapp.controller('subController',function($scope){
    //other properties  
});

现在在更新子属性时，它也会更新父属性并保持连接

相关文章：