angularjs – 在子控制器中获取父控制器,它们都使用’controller as vm’表示法

然而,’controller as vm’表示法缺少一个使其适用于某些行为的细节：

‘$范围.$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文档中理解.

JavaScript Prototypal Inheritance

例：

Working example on 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',function ($scope) {
            var vmc = this;

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