Вставить шаблон директивы после другого элемента при нажатии на этот элемент

0

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

<button myDirective>Click Me</button>

Моя директива выглядит так:

return {
  restrict: 'EA',
  controller: 'Controller',
  replace: false,
  template: '<h3>Test</h3>', // actually more complex
  link: function( $scope, $element, $attrs ) {
    $element.on( 'click', function() {
      // code, that shows the template
    });
  }
};

Результат:

<button myDirective>Click Me
  <h3>Test</h3>
</button>

Но я хочу иметь что-то вроде этого:

<button myDirective>Click Me</button>
<h3>Test</h3> <!-- just shown after button is clicked -->

После нажатия кнопки шаблон следует отображать после нажатия кнопки.

Спасибо.

Теги:
angularjs-directive

3 ответа

1

Я бы предложил сделать кнопку в шаблоне директивы. Вот пример фрагмента:

angular.module('myApp', [])
  .directive('expander', function() {
    return {
      restrict: 'EA',
      replace: true,
      template: '<div><button ng-click="showContent=true">{{buttonText}}</button><h3 ng-show="showContent">Test</h3></div>',
      link: function( $scope, $element, $attrs ) {
        $scope.buttonText = $attrs.text;
      }
    }
  });
<html ng-app="myApp">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.js"></script>
  </head>
  <body>
    <expander text="Press me"></expander>
  </body>
</html>
Поделиться
0

Вы можете использовать ngif или ngshow для отображения содержимого после поднятия флага в обработчике кнопок.

Поделиться
0

Вы можете использовать jqLite.after .after() для добавления содержимого после того, как какой-либо элемент прикреплен к нему, затем спрячьте и покажите контент по щелчку.

Посмотреть:

<button my-directive>Click Me!</button>

Директива:

return {
  restrict: 'EA',
  scope: {
    time: '='
  },
  link: function($scope, $element){
    var afterStuff = angular.element('<h3 style="display:none;">Test</h3>');

    $element.after(afterStuff);
    //full jquery version
    $element.on('click', function(){
      afterStuff.toggle();
    });
  }
}

JSBin: https://jsbin.com/xuwuhu/edit?html,js,output

Поделиться
  • 0
    это невозможно, потому что директива должна быть связана с кнопкой, запускаемой этой кнопкой. Или это может быть ЛЮБОЙ элемент.
  • 0
    Возможно, я не понимаю ваш конкретный вариант использования из вашего описания. Вы все еще можете получить доступ к кнопке, когда она является дочерней по вашей директиве.
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню