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

Question

Я сделал очень простую директиву абзаца на основе тега 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> изменения, как и ожидалось, но значение первыми нет.

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

Answer 1

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

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

В вашем Вид:

<div ng-app="myApp"> 

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

</div> 

В вашем App:

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

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

DEMO:JSBin

Answer 2

Взгляните на docs, особенно в этом конкретном example.

Вы видите, когда угловые transcludes ваше содержание в

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

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

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