Question

我试图编写一个指令，以便创建一个属性为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);
        }
      }
    }
  };
});

A Plunker demo可在此处获取。如果它正在运作，那么＆＃34; Facebook＆＃34;将显示按钮，而不是Facebook＆＃34;按钮不会。目前显示两个按钮，但我不确定我哪里出错。

Answer 1

您应该使用编译服务来编写指令。

$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 here

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

1 个答案: