Пользовательская директива AngularJS со скрытой функцией

Question

Я пытаюсь создать настраиваемую директиву AngularJS, которая скрывает элемент, если он находится в переменной.

К примеру, у меня есть три ссылки, сгенерированные из директивы:

• Главная
• О
• Скрыть

Я хочу, чтобы скрыть ссылку "Скрыть".

Вот мое мнение:

<ul> 
    <menu link="Home"></menu> 
    <menu link="About"></menu> 
    <menu link="Hide"></menu> 
</ul> 

... директива:

app.directive('menu', function() { 
    return { 
     scope: { 
      link: "@" 
     }, 
     template: '<li ng-hide="hideMenu(link)">{{link}}</li>', 
     controller: function($scope) { 
     var hideLink = 'Hide'; 
     function hideMenu(link) { 
      if (hideLink == link) { 
      return true; 
      } 
     } 
     } 
    }; 
}); 

...and Plunker.

Спасибо!

Answer 1

Для вашей функции должны быть доступны в шаблоне, он должен быть в вашей области. Вот обновленный код:

app.directive('menu', function() { 
return { 
    scope: { 
     link: "@" 
    }, 
    template: '<li ng-hide="hideMenu(link)">{{link}}</li>', 
    controller: function($scope) { 
    var hideLink = 'Hide'; 
    $scope.hideMenu = function(link) { 
     if (hideLink == link) { 
     return true; 
     } 
    } 
    } 
}; 
}); 

Answer 2

Добавить в контроллер в директиве $scope.hideMenu = hideMenu;

app.directive('menu', function() { 
    return { 
     scope: { 
      link: "@" 
     }, 
     template: '<li ng-hide="hideMenu(link)">{{link}}</li>', 
     controller: function($scope) { 
     var hideLink = 'Hide'; 
     function hideMenu(link) { 
      if (hideLink == link) { 
      return true; 
      } 
     } 

     $scope.hideMenu = hideMenu; 
     } 
    }; 
});