具有隱藏功能的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; 
     } 
    }; 
});