Директива ngTransclude не работает, не могу понять, где я ошибаюсь

Пытаясь использовать ngTransclude в первый раз для создания пользовательской директивы, для достижения функциональности плавающей метки, как показано здесь: шаблон плавающей метки — Angular JS, но это не т работать.

Вот мой код директивы:

.directive('floatingLabel', function () {
        return {
            restrict: 'A',
            scope: {
                label: '@',
                value: '='
            },
            transclude: true,
            templateUrl: 'floating-label-template.html'
        }}
 )

Шаблон директивы:

<div class="field">
      <label ng-show="value" class="show-hide">{{label}}</label>
      <div ng-transclude></div>
 </div>

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

<input floating-label label="Floating" value="floatingDirective"  type="text" class="form-control" ng-model="floatingDirective"/>

Планкер с моим кодом: https://plnkr.co/edit/MC8G4H3B9zEleaBZ7ijJ?p=preview

P.S. Я использую AngularJS 1.4.9


angularjs angular-directive angularjs-ng-transclude
person Anatoly    schedule 15.05.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Исправлен плункер.

Прочитайте это: Что такое ng-transclude

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

Почему ваш код не работает: вам нечего 'трансклюдировать'.

Общая разметка директивы использования с ng-transclude может выглядеть так:

<directive-with-ng-transclude>
  <node-to-transclude></node-to-transclude>
</directive-with-ng-transclude>

После компиляции <node-to-transclude></node-to-transclude> будет добавлено к шаблону вашей директивы, где вы поместили ng-transclude.

Примечание: ng-model внутри ng-transclude, это почему я использую точечную ng-модель floatingDirective.

person Yin Gang    schedule 15.05.2016