Javascript 有条件地创建内容的角度指令

我正在尝试编写一个指令，以便在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);
        }
      }
    }
  };
});

这里有。如果它正常工作，“Facebook”按钮将显示，而“Not Facebook”按钮将不显示。目前两个按钮都显示，但我不确定哪里出错。
您应该使用编译服务来编写指令

$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
您应该使用编译服务来编写指令

$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
您可以查看，或者在指令中使用ngtemplate@yoavmatchulsky您能告诉我如何在指令模板中使用
ng if
吗。请记住，按钮元素仍然存在。这并不理想，这就是为什么我没有写这篇文章作为答案。@yoavmatchulsky谢谢，但显然我更希望它的行为类似于
ng if
，即如果条件为false，则不会创建元素，因此您必须实现指令和页面之间的交互。除非您的指令始终位于元素上，然后您可以创建一个标记指令并在按钮中使用按钮，您可以查看，或者您可以在指令中使用ngtemplate@yoavmatchulsky您能告诉我如何在指令模板中使用
ng if
吗。请记住，按钮元素仍然存在。这并不理想，这就是为什么我没有写这篇文章作为答案。@yoavmatchulsky谢谢，但显然我更希望它的行为类似于
ng if
，即如果条件为false，则不会创建元素，因此您必须实现指令和页面之间的交互。除非你的指令总是在一个元素上，然后你可以创建一个标签指令并在按钮中使用一个按钮。我已经根据你的建议制作了一个Plunker演示，但它似乎不起作用。我更新了你的plunkr，见上面的链接。Html也更改为基于模型的隐藏/显示指令。toggleI根据您的建议制作了一个Plunker演示，但它似乎不起作用。我更新了您的plunkr，请参阅上面的链接。Html也更改为基于model.toggle的隐藏/显示指令