Доступ к этому контроллеру при использовании контроллера как внутри шаблона директивы

Question

Как я могу получить доступ This контроллера внутри директивы и ее шаблона, когда не используется выделенная область?

app.controller('ChildCtrl', function() {
  this.name = "Name from children";
});

Answer 1

Просто разобрать как controller as instance value в вашу директивную область, как в этой простой демонстрации скрипки:

Посмотреть

<div ng-controller="MyCtrl as ctrl">
  Hello, <span simple-directive data="ctrl.name"></span>!
</div>

Приложение AngularJS

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

myApp.controller('MyCtrl', function ($scope) {
    this.name = 'Superhero';
});

myApp.directive('simpleDirective', function () {
  return {
    restrict: 'A',
    scope: {
      data: '='
    },
    template: '{{ data }}',
    link: function (scope, elem, attrs) {
        console.log(scope.data);
    }
  }
});

---

Другой подход - просто разобрать ваш контроллер в директиву, используя controller:'MyCtrl as ctrl' как в этой демонстрационной скрипке.

Посмотреть

Hello, <span simple-directive></span>!

Приложение AngularJS

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

myApp.controller('MyCtrl', function ($scope) {
  this.name = 'Superhero';
});

myApp.directive('simpleDirective', function () {
  return {
    restrict: 'A',
    controller:'MyCtrl as ctrl',
    template: '{{ ctrl.name }}'
  }
});

---

Вы также можете проанализировать экземпляр контроллера отверстия в области видимости и получить к нему доступ, как в этой демонстрационной скрипке.

Посмотреть

<div ng-controller="MyCtrl as ctrl">
  Hello, <span simple-directive ctrl="ctrl"></span>!
  <br />
  <input type="text" ng-model="ctrl.name">
</div>

Приложение AngularJS

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

myApp.controller('MyCtrl', function ($scope) {
    this.name = 'Superhero';
});

myApp.directive('simpleDirective', function () {
  return {
    restrict: 'A',
    scope: {
      ctrl: '='
    },
    template: '{{ ctrl.name }}',
    link: function (scope, elem, attrs) {
    }
  }
});