在子控制器中获取父控制器，它们都使用“控制器作为 vm"表示法 [英] Get parent controller in child controller which all use 'controller as vm' notation

问题描述

父控制器设置为parentCtrl as vm"，子控制器设置为childCtrl as vmc"，这样就不会发生名称冲突，而且效果很好.

Parent controller set to 'parentCtrl as vm' and chield set to 'childCtrl as vmc' to be no name conflict and it works well.

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

How can I get access to parent controller in child controller?

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

Note that '$scope.$parent' did not work.

推荐答案

要使用$scope"符号访问父控制器，只需使用$scope.$parent".

To access the parent controller using the '$scope' notation just use '$scope.$parent'.

然而，'controller as vm' 表示法缺乏使其与某些行为一起工作的细节:

However the 'controller as vm' notation lacked a detail that makes it work with some behavior:

'$scope.$parent.vm'

'$scope.$parent.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 文档中理解.

However changing the parent objects have side effects on primitive objects which may be understood in the following angular.js documentation.

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;
          };
        }
    ]);
})();

这篇关于在子控制器中获取父控制器，它们都使用“控制器作为 vm"表示法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！