如果或实现类似指令，则扩展ng

Extend ng-if or implement similar directive

本文关键字：扩展 ng 指令 实现 如果      更新时间：2024-01-13

我希望包含或排除基于布尔值的内容。布尔值来自一个提供功能切换的服务。我不想在很多地方注入指令，也不想在ng-if的条件中使用$root。

因此，我想创建一个AngularJS属性指令，它类似于ng-if，但注入了服务，并基于布尔值包含/排除内容，而不是从模板中的属性值中获取条件表达式。

有可能以某种方式扩展现有的ng-if指令吗？如果没有，实现类似行为的最简单/最好的方法是什么？

这里有一个嵌入服务的简单指令，当它执行链接函数时，将根据服务返回的值决定是否显示DOM元素。该指令依赖于currentUser服务来返回值，该值通常是ng-if表达式的一部分。它在链接函数中对此进行评估，因此假设该值是静态的，不需要重新评估。事实上，它不能被重新评估，因为我们从DOM中完全删除了元素。

<!DOCTYPE html>
<html>
  <head>
    <script data-require="angular.js@1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>
  <body>
    <button is-admin>ADMIN BUTTON</button>
    <button>REGULAR BUTTON</button>
    <script>
      
      var app=angular.module("app",[]);
      
      app.service("currentUser",function(){
        
        return {
          isAuthorized : function(){return false;}
        }
        
      });
      
      app.directive("isAdmin",["currentUser", function(currentUser){
        
        var linkFx = function(scope,elem,attrs){
          debugger;
          if(!currentUser.isAuthorized()){
            elem[0].remove();
          }
        }
        
        return {
          link: linkFx,
          restrict: "A"
        }
        
      }]);
      
      angular.bootstrap(document,[app.name]);
      
    </script>
  </body>
</html>

我可能会建议一种不同的方法，那就是在任何父控制器中都有一个对象，并使用该对象来做任何事情。

因此，如果你的第一个控制器是MainCtrl，你可以：

$scope.serviceDataWrapper = function() {
    return MyService.getValue();
}

并在任何地方使用常规ng-if，即使它涉及不同的控制器：

<div ng-if="serviceDataWrapper()"></div>
相关文章：