How to implement inheritance through vm syntax?

Sample code where normal inheritance through $ scope is:

<!DOCTYPE html> <html lang="en" ng-app="scope"> <head> <meta charset="UTF-8"> <title>Angular Scope</title> </head> <body ng-controller="MainController as vm"> {{vm.test}} <!-- переменная из MainController --> <div ng-controller="SecondController as vm"> {{test}} <!-- переменная из MainController --> {{vm.test}} <!-- пусто тк SecondController vm пустой обьект, но через наследование он должен лезть в MainController --> <main-dir></main-dir> </div> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script> <script src="script.js"></script> </body> </html> (function() { 'use strict'; angular.module('scope', []); angular .module('scope') .controller('MainController', ['$scope', function ($scope) { $scope.test = '1'; var vm = this; vm.test = '1'; }]) .controller('SecondController', ['$scope', function ($scope) { // тут по сути должен быть прототип на родителя MainController, и собственно в прототипе должно быть свойство test var vm = this; }]) .directive('mainDir', function () { return { restrict: 'AE', template: '<div>{{test}}</div>', link: function ($scope, el, attr) { // как тут получить vm.test или нужно использовать controller вместо link } } }) })();
  • controller as syntax was added to avoid inheriting from the ubiquitous - Grundy
  • Take out the object declaration to the service that creates singelton when the program is initialized, and inject it into the controllers - Den
  • @Den, more services to the god of services :-D - Grundy
  • MDA I didn’t wake up yet, I understood the wrong question)) - Den

2 answers 2

  1. controller as syntax was added to avoid inheritance from ubiquitous.
    And in your case, inheritance is not necessary, simply give meaningful names to the controllers:

     <body ng-controller="MainController as mc_vm"> {{mc_vm.test}} <!-- переменная из MainController --> <div ng-controller="SecondController as sc_vm"> {{mc_vm.test}} <!-- переменная из MainController --> {{sc_vm.test}} <!-- пусто тк SecondController vm пустой обьект, но через наследование он должен лезть в MainController -->

  2. In the case of the directive, the options are a bunch: from getting through attributes to getting out of scope, because when you write MainController as mc_vm property is added to the controller mc_vm .
    Help directives

  • Then which approach to use? Gurus write what you need in vm, but then you cannot use inheritance, you have to write something like $ scope. $ Parent. $ Parent.vm. As a variable and a second-level parent, using $ scope I just write $ scope. Variable and angular follows the inheritance chain until it finds a variable. - Khotey Vitaliy
  • @KhoteyVitaliy, it all depends on the specific task, in addition, when using controllers, they try to avoid using $scope at all, therefore the situation $scope.$parent.$parent... cannot be - Grundy
  • @KhoteyVitaliy, if you have a problem with $scope.$parent.$parent... prepare an example and ask a separate question - Grundy
  • Well, here’s the same code, I want to get the test variable through inheritance in SecondController, so that I don’t have to write vm.test = $ scope. $ Parent.vm.test, I understand that if I want to do this, the vm syntax is not for me - Khotey Vitaliy
  • For example, in the same directive there are link and controller functions to which $ scope is passed, and if the controllers work through $ scope, then I also specify $ scope.test and the angular goes along the chain, if in vm, then in the directive also there will be inheritance, I stupidly walk along the chain ($ scope. $ parent. $ parent.vm.test) and look for a variable - Khotey Vitaliy

When using the controller as syntax, you need to use javascript prototypes.

 function MainController() { this.view = MainController.prototype.view; } MainController.prototype.view = { test: 'test' }; function SecondController() { MainController.prototype.view.test = 'test2'; }

You can read here http://rav.pw/angularjs-inheritance/