コンテンツを条件付きで作成するangleディレクティブ

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下に表示され、このディレクティブで作った進歩がここにあります。それが機能していた場合は、「Facebook」ボタンが表示され、「Facebookではない」ボタンは表示されません。現在、両方のボタンが表示されていますが、どこが間違っているのか分かりません。

Answer 1

コンパイルサービスを使用してディレクティブを記述する必要があります。

$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へのリンク