У меня есть директива, в которой есть трансклюд. Включенный контент представляет собой форму, которая имеет опцию отправки, вызывающую метод в (родительском) контроллере. Этот метод вызывается из включенной области, поэтому к любым переменным, к которым я обращаюсь в контроллере, я могу получить доступ через this.variable, поскольку это отражает область вызывающих (текущую). Однако $scope.variable не определено, поскольку $scope относится к родительской области, которая является областью действия контроллера.
Должен ли я действительно использовать this для доступа к значениям форм или есть соглашение, которое я должен реализовать для доступа через $scope в (родительском) контроллере?
Отказ от ответственности: я знаю, что не использую функциональность контроллера, и прямо сейчас я не могу изменить это для проекта.
Планкер для демонстрации проблемы: http://plnkr.co/edit/TdgZFIRNbUcHNfe3a7uO?p=preview
Как вы можете видеть, значение внутри директивы обновляется при изменении значения в текстовом поле. Это ожидаемо, поскольку оба относятся к включенной области. {{name}} за пределами директивы не изменяется, так как это родительская область, а не включенная область. Одностороннее движение.
Какое правильное решение? Использовать this.name или изменить директиву, чтобы $scope.name можно было использовать вне директивы?
Для тех, кто предпочитает код плункерам:
HTML:
<body ng-app="docsTransclusionExample">
<div ng-controller="Controller">
{{name}}
<my-dialog>
Check out the contents, {{name}}!
<form>
<input ng-model="name">
</form>
</my-dialog>
</div>
</body>
Директива:
(function(angular) {
'use strict';
angular.module('docsTransclusionExample', [])
.controller('Controller', function($scope) {
$scope.name = 'Tobias';
})
.directive('myDialog', function() {
return {
restrict: 'E',
transclude: true,
scope: {},
templateUrl: 'my-dialog.html'
};
});
})(window.angular);
Шаблон директивы:
<div class="alert" ng-transclude></div>
