Возможно ли обновить родительский охват из Angular Директивы с областью действия: true?

Мне нужно наследовать область действия от родительского контроллера в директиве. Я не обязательно хочу оставить область действия: false. Я также не обязательно хочу использовать изолированную область видимости, потому что она требует много работы, чтобы получить значения, которые меня волнуют, связанные правильно (думаю, много значений в родительском контроллере).

Имеет ли смысл использовать scope:true в моей директиве, если я хочу обновить родительскую область?

<div ng-controller="MyCtrl">
      Hello, {{name}}!
        <my-directive></my-directive>
</div>

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

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
    $scope.name = 'Dave';
}


myApp.directive('myDirective', function() {
    return {
        scope: true,
        restrict: 'EA',
        link: function(scope, elem, attrs) {
            scope.updateName = function(newName) {
                console.log('newName is: ' + newName);
                scope.name = newName;
            }
        },
        template: '<input ng-model="updatedName" placeholder="new name value"> <button ng-click="updateName(updatedName)">Update</button>'
    }
})

Пожалуйста, ознакомьтесь с fiddle

Ответы

Ответ 1

Хотя @user1737909 уже ссылался на вопрос SO для чтения (Каковы нюансы объема прототипа/прототипного наследования в AngularJS?, которые объяснят проблему и рекомендуют различные способы его исправить), мы обычно пытаемся дать ответ на SO.

Итак, причина, по которой ваша скрипка не работает, заключается в том, что когда примитивный тип (т.е. строка, число или логический тип) записывается в - например, scope.name = newName - "запись" всегда идет локальный объем/объект. Другими словами, дочерняя область получает свое собственное свойство name, которое затеняет родительское свойство с тем же именем. Исправление состоит в том, чтобы использовать объект, а не примитивный тип, в родительской области. Затем дочерняя область получит ссылку на этот объект. Любые записи свойств объекта (будь то из родителя или дочернего элемента) будут переходить к одному объекту. (Объект child не получает свой собственный объект.)

$scope.obj = {name: 'Dave'};

Затем в вашей директиве:

scope.obj.name = newName;

и HTML:

Hello, {{obj.name}}!

fiddle

Ответ 2

Наследование наследования не означает, что значение дочернего элемента задает значение его родителя.

Вместо того, чтобы делать scope.name = newName в области дочерних объектов, добавьте метод в родительскую область, которая будет выполнять ту же работу, но в родительской области, и вызовет ее из области дочернего элемента, поскольку ребенок наследует этот метод.

Ответ 3

В вашей функции ссылок вы должны написать в родительскую область (глобальная область "область видимости" ) так: scope. $parent.name = newName;