0

Как реализовать наследование через синтаксис vm ?

Пример кода, где обычное наследование через $scope:

<!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
        }
      }
    })
})();
4
  • controller as синтаксис как раз и добавили чтобы уйти от наследования повсеместного
    – Grundy
    5 янв 2016 в 8:47
  • Вынеси декларацию объекта в сервис который создаёт сингелтон при инициализации программы, и инжекть его в контролеры
    – Den
    5 янв 2016 в 8:49
  • @Den, больше сервисов богу сервисов :-D
    – Grundy
    5 янв 2016 в 8:50
  • мда походу ещё не проснулся, не так вопрос понял ))
    – Den
    5 янв 2016 в 8:52

2 ответа 2

1
  1. controller as синтаксис как раз и добавили чтобы уйти от наследования повсеместного.
    И в вашем случае наследование не нужно, достаточно просто дать осмысленные имена контроллерам:

    <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. В случае с директивой - вариантов куча: от получения через атрибуты, до получения из scope, так как, когда пишется MainController as mc_vm в скоп контроллера добавляется свойство mc_vm.
    Справка по директивам

8
  • Тогда какой подход использовать ? Гуру пишут что нужно через vm, но тогда нельзя использовать наследование, приходится писать что то вроде $scope.$parent.$parent.vm.какая то переменная и родителя второго уровня, с использование $scope я просто пишу $scope.переменная и angular идет по цепочке наследования пока не найдет переменную. 5 янв 2016 в 10:15
  • @KhoteyVitaliy, все зависит от конкретной задачи, кроме того, при использовании контроллеров стараются избегать использование $scope вообще, поэтому и ситуации $scope.$parent.$parent... быть не может
    – Grundy
    5 янв 2016 в 10:21
  • @KhoteyVitaliy, если у вас проблема с $scope.$parent.$parent... подготовьте пример и задайте отдельным вопросом
    – Grundy
    5 янв 2016 в 10:23
  • Ну вот тот же код, я в SecondController хочу получить переменную test через наследования, чтобы мне не приходилось писать vm.test = $scope.$parent.vm.test, я так понял если я хочу так делать, то синтаксис vm не для меня 5 янв 2016 в 10:27
  • К примеру в той же директиве есть функции link и controller в которые передаются $scope, и если контроллеры работают через $scope, то я так же указываю $scope.test и ангуляр идет по цепочке, если же через vm, то в директиве тоже не будет наследования, я тупо иду по цепочке ($scope.$parent.$parent.vm.test) и ищу переменную 5 янв 2016 в 10:44
1

При использовании синтаксиса controller as нужно использовать javascript прототипы.

function MainController() {
    this.view = MainController.prototype.view;
}

MainController.prototype.view = { test: 'test' };

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

Можно почитать тут http://rav.pw/angularjs-inheritance/

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.