Javascript 带隐藏函数的AngularJS自定义指令

Javascript 带隐藏函数的AngularJS自定义指令,javascript,angularjs,angularjs-directive,Javascript,Angularjs,Angularjs Directive,我试图创建一个AngularJS自定义指令,如果元素在变量中,它将隐藏该元素 例如,我从指令生成了三个链接: app.directive('menu', function() { return { scope: { link: "@" }, template: '<li ng-hide="hideMenu(link)">{{link}}</li>', controller: function($s

我试图创建一个AngularJS自定义指令,如果元素在变量中,它将隐藏该元素

例如,我从指令生成了三个链接:

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;
          }
        }
      }
    };
});
  • 关于
  • 隐藏
我想隐藏“隐藏”链接

以下是我的看法:

<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;
          }
        }
      }
    };
});
app.directive('menu',function(){
返回{
范围:{
链接:“@”
},
模板:“
  • {{{link}
  • ”, 控制器:功能($scope){ var hideLink=‘隐藏’; 函数hideMenu(链接){ if(hideLink==链接){ 返回true; } } } }; });


    谢谢大家!

    在指令
    中添加到控制器中$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;
          }
        };
    });
    
    app.directive('menu',function(){
    返回{
    范围:{
    链接:“@”
    },
    模板:“
  • {{{link}
  • ”, 控制器:功能($scope){ var hideLink=‘隐藏’; 函数hideMenu(链接){ if(hideLink==链接){ 返回true; } } $scope.hideMenu=hideMenu; } }; });
    要使您的功能在模板中可用,它必须在您的范围内。以下是更新的代码:

    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;
          }
        }
      }
    };
    });
    
    app.directive('menu',function(){
    返回{
    范围:{
    链接:“@”
    },
    模板:“
  • {{{link}
  • ”, 控制器:功能($scope){ var hideLink=‘隐藏’; $scope.hideMenu=函数(链接){ if(hideLink==链接){ 返回true; } } } }; });