угловая директива, которая условно создает контент

Question

угловая директива, которая условно создает контент

0

Я пытаюсь написать директиву, так что элемент с атрибутом if-login-service="facebook" будет создан, но элемент с любым другим значением для этого атрибута не будет.

Прогресс, который я сделал с этой директивой до сих пор, показан ниже

app.directive('ifLoginService', function($compile) {

  return {
    restrict: 'EA',
    compile: function compile(element, attrs) {

      return function($scope, $element, $attr) {

        var serviceName = attrs.ifLoginService;

        if (serviceName === 'facebook') {

          // use compile to include and compile your content here
          $compile($element.contents())($scope);
        }
      }
    }
  };
});

Демо-версия Plunker доступна здесь. Если он будет работать, кнопка "Facebook" будет отображаться, а кнопка "Not Facebook" - нет. В настоящее время отображаются обе кнопки, но я не уверен, где я ошибаюсь.

Little Bobby Drop Tables 01 июнь 2016, в 13:34

Источник

0

Вы можете посмотреть на источник ngIf или просто использовать ng-if в своем шаблоне директивы
yoavmatchulsky 01 июнь 2016, в 10:42
0

@yoavmatchulsky Не могли бы вы показать, как я мог бы использовать ng-if в моем шаблоне директивы?
Little Bobby Drop Tables 01 июнь 2016, в 10:43
0

что - то вроде этого . имейте в виду, что элемент кнопки все еще существует. это не идеально, и поэтому я не написал это как ответ.
yoavmatchulsky 01 июнь 2016, в 10:52
0

@yoavmatchulsky спасибо, но, очевидно, я бы предпочел, чтобы он вел себя как ng-if , то есть элементы не создаются, если условие ложно
Little Bobby Drop Tables 01 июнь 2016, в 10:57
0

поэтому вам придется реализовать взаимодействие между директивой и страницей. Если ваша директива не всегда находится в элементе <button>, а затем вы можете просто создать директиву tag и использовать кнопку в кнопке
yoavmatchulsky 01 июнь 2016, в 11:09
0

@yoavmatchulsky Нет, директива может быть для любого типа элемента
Little Bobby Drop Tables 01 июнь 2016, в 12:01

Показать ещё 4 комментария

Теги:

javascript

angularjs

angularjs-directive

1 ответ

Ещё вопросы

Вы можете посмотреть на источник ngIf или просто использовать ng-if в своем шаблоне директивы
@yoavmatchulsky Не могли бы вы показать, как я мог бы использовать ng-if в моем шаблоне директивы?
что - то вроде этого . имейте в виду, что элемент кнопки все еще существует. это не идеально, и поэтому я не написал это как ответ.
@yoavmatchulsky спасибо, но, очевидно, я бы предпочел, чтобы он вел себя как ng-if , то есть элементы не создаются, если условие ложно
поэтому вам придется реализовать взаимодействие между директивой и страницей. Если ваша директива не всегда находится в элементе <button>, а затем вы можете просто создать директиву tag и использовать кнопку в кнопке
@yoavmatchulsky Нет, директива может быть для любого типа элемента

Vu Quyet · Accepted Answer · 2016-06-01T08-31-00.000Z

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

$compile('your html content here')($scope);

Чтобы очистить корневой элемент, такой как кнопка, используйте это:

$element[0].html('');

Или удалите его из DOM:

$element[0].parentNode.removeChild($element[0]);

Вот ваша директива отремонтирована:

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

app.controller('MainCtrl', function($scope) {
  $scope.model = {
    toggle: 'true'
  };
});

app.directive('ifLoginService', function($compile,$animate) {

  return {
    restrict: 'EA',
    replace: true,
    compile: function compile(element, attrs) {

      return function($scope, $element, $attr) {

        var serviceName = attrs.ifLoginService;
        console.debug('Testing service name', serviceName);

        if (serviceName === 'true') {
          // use compile to include and compile your content here
          $element.html($compile($element.contents())($scope));
        }
        else
        {
          $element[0].parentNode.removeChild($element[0]);
        }
      }
    }
  };
});

Ссылка на plunkr здесь

Я сделал демо-версию Plunker, основываясь на вашем предложении, но, похоже, оно не работает plnkr.co/edit/AWTPi5?p=preview
Я обновил ваш plunkr, см. Ссылку выше. HTML также изменен, чтобы скрыть / показать директиву, основанную на model.toggle