Как передать значение атрибута родительской директивы в область действия дочерней директивы через transclude?

Я пытаюсь передать значение атрибута из директивы в область действия дочерней директивы через ng-transclude. Я пробовал использовать =, @ и для привязки области действия, однако я все еще в замешательстве. Я бы хотел, чтобы дочерняя директива наследовала атрибут от родительской директивы. Любая помощь будет оценена по достоинству!

Я сделал jsfiddle здесь --> https://jsfiddle.net/egdfLzLj/5/

Javascript

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

app.directive('parent', function () {
    return {
    restrict: 'E',
    transclude: true,
    replace: true,
    scope: {
        label: '@'
    },
    template: '<section>' +
            '<label>{{::label}}' + 
            '<ng-transclude></ng-transclude>' +
            '</label>' +
      '</section>'
  };
});

app.directive('child', function () {
  return {
    restrict: 'E',
    replace: true,
    scope: {
      type: '@',
      label: '&'
    },
    template: '<input ng-type="type" ng-value="::label">'
  };
});

HTML

<parent label="Parent Label">
  <child type="text"></child>
</parent>

javascript angularjs angularjs-directive angular-template angularjs-scope
person jemiloii    schedule 28.04.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Демонстрация: https://jsfiddle.net/egdfLzLj/2/

HTML

<parent label="Parent Label">
    <child type="text"></child>
</parent>

Директива

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

app.directive('parent', function () {
    return {
    restrict: 'E',
    transclude: true,
    replace: true,
    scope: {
        label: '@'
    },
    template: '<section>' +
            '<label>{{::label}}' + 
            '<ng-transclude></ng-transclude>' +
            '</label>' +
      '</section>'
  };
})

app.directive('child', function () {
  return {
    restrict: 'E',
    replace: true,
    link: function (scope) {scope.label =  scope.$parent.label;},
    template: '<input type="text" value="{{ label }}">'
  };
});
person softvar    schedule 28.04.2016
comment
Это не то, что я пытаюсь сделать. Я пытаюсь избежать добавления метки к дочернему элементу. Я хотел бы, чтобы он наследовал атрибут от родителя. Я помещаю в jsfiddle то, что я ожидаю отобразить. - person jemiloii; 28.04.2016
comment
@softvar Я также пытался получить значение родителя с помощью ключа require, но это не сработало. Parent не был найден, поэтому в функции ссылки не было дополнительного параметра. Почему? Это потому, что родитель трансклюдирует? - person Michelangelo; 28.04.2016
comment
Это работает, но я думаю, что область больше не является частной. Есть ли способ сохранить приватность области? - person jemiloii; 28.04.2016
comment
Да, используйте: scope: true, в дочерней директиве, которая в конечном итоге будет иметь свою собственную изолированную область. Но тогда вы не сможете получить доступ к чему-либо от родителя, если вы не определите parentController и не используете его в функции ссылки дочерней директивы. Что-то вроде: link: function (scope, elem, attr, parentController) {// access parentController's scope variables here } - person softvar; 28.04.2016
comment
Потрясающий! Попробую, еще раз спасибо за помощь :) - person jemiloii; 28.04.2016
comment
Рад вам помочь! :) - person softvar; 28.04.2016