Как получить доступ к родительскому свойству с помощью контроллера Как обозначение

Я использую контроллер, как в моем представлении, следующим образом:

<body ng-controller="MainCtrl as main">
   <div ng-controller="ChildCtrl as child">
      {{ main.parentValue }} + {{ child.childValue }}
   </div>
</body>

Определение моего контроллера следующим образом:

app.controller('MainCtrl', function($scope) {
   this.parentValue = 'Main';
});

app.controller('ChildCtrl', function($scope) {
   this.childValue = 'Child';
   // I want to access the property of the parent controller here
});

Как ChildCtrl может установить свойство name MainCtrl? Здесь Plunkr.

Используя нотацию $scope, я мог бы получить доступ к $scope.parentValue из дочернего контроллера. Как можно достичь такой же функциональности с помощью контроллера как обозначение?

Ответ 1

Поскольку вы используете "контроллер как" нотацию, с помощью ChildCtrl вы можете получить доступ к MainCtrl с помощью $scope.main, например $scope.main.name.

Смотрите мой фрагмент ниже.

var app = angular.module('app', []);

app.controller('MainCtrl', function($scope) {
  this.name = 'Main';
  this.test = {};
});

app.controller('ChildCtrl', function($scope) {
  this.name = 'Child';
  alert($scope.main.name);
});

<html ng-app="app">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-controller="MainCtrl as main">
  <div ng-controller="ChildCtrl as child">
    {{ main.name }} + {{ child.name }}
  </div>
</body>

</html>

Ответ 2

Нельзя смешивать использование "контроллера как" и "$ scope". Чтобы обновить данные в родительской области, вы могли/должны использовать службы.

Пример: изменение названия страницы из любого дочернего контроллера:

app.service("SiteService", function () {
    return {
        title: "Page title";
    }
}


app.controller ("ParentCtrl", function (SiteService) {
    this.site = SiteService;
}

app.controller ("ChildCtrl", function (SiteService) {
    SiteService.title = "New Title";
}

И ваш шаблон

<html ng-app="someApp" ng-controller="ParentCtrl as site">
    <head>
         <title>{{site.title}}</title>
    </head>
</html>

Основное преимущество этого подхода: вы выделяете public mutable из частных свойств.

Ответ 3

Ввод данных в $scope - это способ angular. Вы также можете установить/получить свои данные из службы, которую затем легко включить в любой контроллер.

Посмотрите это видео: https://egghead.io/lessons/angularjs-sharing-data-between-controllers