Question

我想根据布尔值包含或排除内容。布尔值来自提供功能切换的服务。我不想在很多地方注入该指令，或者在$root的条件下使用ng-if。

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

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

Answer 1

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

＆＃13;

<!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>

＆＃13;

Answer 2

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

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

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

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

<div ng-if="serviceDataWrapper()"></div>

扩展 - 如果或实施类似的指令

2 个答案: