угловая директива с ng-transclude

Я сделал очень простую директиву абзаца на основе HTML-тега <p>.

angular.module('myApp').directive('paragraph', function() {
  return {
    restrict: 'E',
    transclude: true,
    controller: function() {
      var vm = this;
      vm.text = "Paragraph text from controller"
    },
    controllerAs: 'ParagraphViewModel',
    template: '<p ng-transclude>{{ParagraphViewModel.text}}</p>'
  }
});

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

<paragraph>This is a very simple paragraph</paragraph>
<paragraph></paragraph>

И у меня есть ввод, который я привязал к ParagraphViewModel.text.

<input type="text" ng-model="ParagraphViewModel.text">

Проблема в том, что когда я меняю ввод, второе значение <paragraph> изменяется, как и ожидалось, а значение первого - нет.

Пожалуйста, проверьте это JSBin, чтобы увидеть его в действии.


javascript angularjs angularjs-ng-transclude
person sadrzadehsina    schedule 01.11.2016    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Я предполагаю, что вы пытаетесь достичь здесь, чтобы передать вашей директиве текст по умолчанию, а затем изменить его с помощью связанного ввода.

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

В вашем представлении:

<div ng-app="myApp">

  <paragraph pgtext="Foo" pgmodel="bar"></paragraph>
  <paragraph>{{bar}}</paragraph>
  <input type="text" ng-model="bar">

</div>

В вашем приложении:

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

angular.module('myApp').directive('paragraph', function() {
return {
    restrict: 'E',
    transclude: true,
    scope: {
      pgmodel: '=',
      pgtext: '@'
    },
    template: '<p ng-transclude>{{pgmodel || pgtext}}</p>'
  }
});

ДЕМО: JSBin

person mamsoudi    schedule 01.11.2016

arrow_upward
2
arrow_downward

Еще раз взгляните на документы, особенно на этот конкретный пример.

Видите ли, когда Angular включает ваш контент в

<paragraph>This is a very simple paragraph</paragraph>

он полностью забывает о привязке {{ParagraphViewModel.text}} в шаблоне директивы, потому что все содержимое <p ng-transclude> будет заменено содержимым из тега <paragraph>.

Второй случай работает так, как вы ожидаете, просто потому, что замена контента не происходит, а Angular по умолчанию использует контент из вашего шаблона.

person Dennis Baizulin    schedule 01.11.2016
comment
так есть ли решение для этого? - person sadrzadehsina; 01.11.2016
comment
Решение чего? :) Так и должно быть. Какого поведения вы пытаетесь достичь? - person Dennis Baizulin; 01.11.2016
comment
@ Деннис понял. Angular заменит ваш тег при использовании ng-transclude. - person Fabio Silva Lima; 01.11.2016