0

I'm trying to write a directive such that an element with attribute if-login-service="facebook" will be created, but an element with any other value for this attribute will not.

The progress I've made with this directive so far is shown below

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 is available here. If it were working, the "Facebook" button would be displayed and the "Not Facebook" button would not. Currently both buttons are displayed, but I'm not sure where I'm going wrong.

||||||
  • You can look at the source of ngIf, or you can just use ng-if in your directive template – yoavmatchulsky Jun 1 '16 at 10:42
  • @yoavmatchulsky could you show how I could use ng-if in my directive template? – Little Bobby Drop Tables Jun 1 '16 at 10:43
  • something like this. keep in mind that the button element will still exists. that's not ideal and that's why I didn't wrote this as an answer. – yoavmatchulsky Jun 1 '16 at 10:52
  • @yoavmatchulsky thanks, but obviously I'd prefer if this behaved like ng-if, i.e. the elements are not created if the condition is false – Little Bobby Drop Tables Jun 1 '16 at 10:57
  • so you'll have to implement interaction between the directive and the page. Unless your directive is always on a <button> element, and then you can just create a tag directive and use a button in the button – yoavmatchulsky Jun 1 '16 at 11:09
2

You should use compile service to write your directive.

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

To clear root element such as button use this:

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

Or remove it from DOM:

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

Here is your directive repaired:

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]);
        }
      }
    }
  };
});

Link to plunkr here

||||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.