在子控制器中获取父控制器，所有子控制器都使用“controller as vm”表示法

Question

父控制器设置为 ' parentCtrl as vm ' 和 chield 设置为 ' childCtrl as vmc ' 没有名称冲突，它运行良好。

如何在子控制器中访问父控制器？

请注意，'$scope.$parent' 不起作用。

Answer 1

要使用“$scope”表示法访问父控制器，只需使用“$scope.$parent”。

然而，“controller as vm”符号缺乏使其适用于某些行为的细节：

'$范围.$父级。虚拟机

app.controller('childCtrl', [
    '$scope', function ($scope) {
        var vmc = this;

        // To protected access as vmc.parent
        Object.defineProperty(vmc, 'parent', {
            get: function () {
                return $scope.$parent.vm;
            }
        });
    }
]);

然而，更改父对象会对原始对象产生副作用，这可以在以下 angular.js 文档中理解。

JavaScript 原型继承

例子：

JS Bin 上的工作示例

<section class="parent" 
         data-ng-controller="parentCtrl as vm">
  <input data-ng-model="vm.name">

  <!-- have to change the prefix after the 'as' not to have conflict -->
  <section class="child"
           data-ng-controller="childCtrl as vmc">
    <input data-ng-model="vm.name">
    <!-- same results -->
    <input data-ng-model="$parent.vm.name">
    <!-- same results -->
    <input data-ng-model="vmc.parent.name">
    <!-- same results -->
    <button data-ng-click="vmc.changeName()">Change name</button>
  </section>
</section>

(function(){
  var app = angular.module('app', []);
  app.controller('parentCtrl', [
        '$scope', function ($scope) {
            var vm = this;
            vm.name = 'Julia';
        }
    ]);
  app.controller('childCtrl', [
        '$scope', function ($scope) {
            var vmc = this;

            // To protected access as vmc.parent
            Object.defineProperty(vmc, 'parent', {
                get: function () {
                    return $scope.$parent.vm;
                }
            });
          vmc.changeName = function(){
            vmc.parent.name = 'Other ' + vmc.parent.name;
          };
        }
    ]);
})();