Angularjs 子控制器未从父控制器继承

我在理解作用域继承方面遇到了很多麻烦，我尽了最大努力将数据对象从父控制器传递到子控制器，但我似乎无法让事情正常进行。有人能解释一下为什么这不起作用吗？谢谢大家!

编辑：我之前没有指定这一点，但使用John Papa样式指南是项目要求，因此我无法通过在两个控制器中使用

$scope

来解决此问题

更新：似乎我误解了使用此的目的。。。根据下面海报的帮助，我现在了解到某些操作需要使用

$scope

，John Papa的风格指南只是要求开发人员在适当的时候使用

此

，以避免范围冲突，而不是取代scope

JS

//parent.controller.js
(function () {
    'use strict';

    angular
        .module('app')
        .controller('ParentController', ParentController);

    ParentController.$inject = ['$scope'];

    function ParentController($scope) {
        var vm = this;
        console.log(this);
        vm.test = {};
        vm.test.label = "This is being set in the parent controller.";
    }
})();

//child.controller.js
(function () {
    'use strict';

    angular
        .module('app')
        .controller('ChildController', ChildController);

    ChildController.$inject = ['$scope'];

    function ChildController($scope) {
        var vm = this;
        vm.test = vm.test;
    }
})();

HTML

<div ng-controller="ParentController as vm">
     <div>PARENT: {{vm.test.label}}</div>
     <div ng-controller="ChildController as vm">
          <div>CHILD: {{vm.test.label}}</div>
     </div>
</div>

---

问题是：vm也是$scope本身的一部分。因此，不能为父控制器和子控制器使用相同的此实例。否则，您将在使用它们时面临问题。 如果要为父级和子级隔离此实例，请指定不同的名称。 由于vm也是控制器的一部分，因此如果您想访问子控制器内的父级vm，则必须执行

$scope.vm

根据您的要求，工作代码附在下面：

Controller
---------
(function () {
                'use strict';

    angular
        .module('app', [])
        .controller('ParentController', ParentController);

    ParentController.$inject = ['$scope'];

    function ParentController($scope) {
        var vm = this;
        console.log(this);
        vm.test = {};
        vm.test.label = "This is being set in the parent controller.";
    }
})();

(function () {
    'use strict';

    angular
        .module('app')
        .controller('ChildController', ChildController);

    ChildController.$inject = ['$scope'];

    function ChildController($scope) {
        var childVm = this;
        childVm.test = $scope.vm.test;
    }
})();


HTML
---

<div ng-app="app">
            <div ng-controller="ParentController as vm">
                <div>PARENT: {{vm.test.label}}</div>
                <div ng-controller="ChildController as childVm">
                    <div>CHILD: {{childVm.test.label}}</div>
                </div>
            </div>
        </div>

控制器
---------
（功能（）{
"严格使用",；
有棱角的
.module（'应用程序'，[]）
.控制器（“家长控制器”，家长控制器）；
ParentController.$inject=['$scope']；
函数ParentController（$scope）{
var vm=这个；
console.log（this）；
vm.test={}；
vm.test.label=“这是在父控制器中设置的。”；
}
})();
（功能（）{
"严格使用",；
有棱角的
.module（'应用程序'）
.controller（“ChildController”，ChildController）；
ChildController.$inject=['$scope']；
函数ChildController（$scope）{
var childVm=this；
childVm.test=$scope.vm.test；
}
})();
HTML
---
父项：{vm.test.label}
子项：{{childVm.test.label}

---

干杯

问题是：vm也是$scope本身的一部分。因此，不能为父控制器和子控制器使用相同的此实例。否则，您将在使用它们时面临问题。 如果要为父级和子级隔离此实例，请指定不同的名称。 由于vm也是控制器的一部分，因此如果您想访问子控制器内的父级vm，则必须执行

$scope.vm

根据您的要求，工作代码附在下面：

Controller
---------
(function () {
                'use strict';

    angular
        .module('app', [])
        .controller('ParentController', ParentController);

    ParentController.$inject = ['$scope'];

    function ParentController($scope) {
        var vm = this;
        console.log(this);
        vm.test = {};
        vm.test.label = "This is being set in the parent controller.";
    }
})();

(function () {
    'use strict';

    angular
        .module('app')
        .controller('ChildController', ChildController);

    ChildController.$inject = ['$scope'];

    function ChildController($scope) {
        var childVm = this;
        childVm.test = $scope.vm.test;
    }
})();


HTML
---

<div ng-app="app">
            <div ng-controller="ParentController as vm">
                <div>PARENT: {{vm.test.label}}</div>
                <div ng-controller="ChildController as childVm">
                    <div>CHILD: {{childVm.test.label}}</div>
                </div>
            </div>
        </div>

控制器
---------
（功能（）{
"严格使用",；
有棱角的
.module（'应用程序'，[]）
.控制器（“家长控制器”，家长控制器）；
ParentController.$inject=['$scope']；
函数ParentController（$scope）{
var vm=这个；
console.log（this）；
vm.test={}；
vm.test.label=“这是在父控制器中设置的。”；
}
})();
（功能（）{
"严格使用",；
有棱角的
.module（'应用程序'）
.controller（“ChildController”，ChildController）；
ChildController.$inject=['$scope']；
函数ChildController（$scope）{
var childVm=this；
childVm.test=$scope.vm.test；
}
})();
HTML
---
父项：{vm.test.label}
子项：{{childVm.test.label}

---

干杯

查看plnkr后，希望我能够理解您的问题，并根据问题给出答案：

在控制器文件中，用于ChildController

var childCtrl = this;

// Why don't either of these work?
// childCtrl.test = parentCtrl.test;
// childCtrl.test = this.parentCtrl.test;

• 分配parentCtrl.test没有任何意义，因为它是父控制器的对象
• 此.parentCtrl.test将被计算为无效的childCtrl.parentCtrl.test

以下内容之所以有效，是因为-

// But this does...
childCtrl.test = $scope.parentCtrl.test;

在代码执行期间

• 将为ParentController和ChildController分别创建两个单独的作用域

• 子对象将继承父对象的属性，这些属性不在childController中，并且将分配给childController作用域。 因此，您可以访问具有作用域的子对象中的值

---

检查plnkr后，希望我能够理解您的问题，并根据问题给出答案：

在控制器文件中，用于ChildController

var childCtrl = this;

// Why don't either of these work?
// childCtrl.test = parentCtrl.test;
// childCtrl.test = this.parentCtrl.test;

• 分配parentCtrl.test没有任何意义，因为它是父控制器的对象
• 此.parentCtrl.test将被计算为无效的childCtrl.parentCtrl.test

以下内容之所以有效，是因为-

// But this does...
childCtrl.test = $scope.parentCtrl.test;

在代码执行期间

• 将为ParentController和ChildController分别创建两个单独的作用域

• 子对象将继承父对象的属性，这些属性不在childController中，并且将分配给childController作用域。 因此，您可以访问具有作用域的子对象中的值

---

您应该只有一个模块，为什么要声明两个模块？请查看此链接，@Aparna非常感谢您的帮助。plunkr是可行的，但遵守该风格指南是项目的一项要求。我刚刚用这些信息更新了我的帖子，因为我之前没有指定。哦和@Aparna，我没有声明两个模块，只是得到了两个对应用程序的引用，因为在我的代码中，这些控制器在两个单独的文件中。再一次，很抱歉，我没有具体说明。@Aparna刚刚修改了您的plunkr，以更好地演示我正在努力解决的问题，您应该只有一个模块，为什么要声明两个模块？请检查此plunkr，@Aparna非常感谢您的帮助。plunkr是可行的，但遵守该风格指南是项目的一项要求。