javascript - AngularJS 使用 NG-IF 检查模块是否存在

Question

我创建了一个名为“app.product”的自定义模块，其中包含一组 View 。

在主导航中，我创建了指向相关 View 的链接。下面是 2 个产品相关链接的示例。

<ul class="nav">
  <li><a ui-sref="home">Home</a></li>

  <li><a ui-sref="productList">Products</a></li>
  <li><a ui-sref="productAdd({productId:0})>Create New Product</a></li>
</ul>

我只希望“产品”和“创建新产品”仅在“app.product”模块注册到应用程序时才显示。

我通常尝试以下语法:

<ul class="nav">
  <li>...</li>

  <li ng-if="angular.module('app.product')"><a ui-sref="productList">Products</a></li>
  <li ng-if="angular.module('app.product')"><a ui-sref="productAdd({productId:0})>Create New Product</a></li>
</ul>

这行不通......我尝试创建一个返回 bool 的方法，但它也不适用于 ng-if。

令人沮丧的是，如果我手动硬编码 true/false，它就会起作用:

<li ng-if="false"><a ui-sref="productList">Products</a><li>

这是我的模块和主 appController 的布局

//main application module
angular.module("app", ['ui.router',"app.product"]);

//main application controller
angular.module("app").controller("AppController", AppController);

function AppController(){
    var vm = this;
    vm.moduleExists = function(name){
       try{
          angular.module(name);
          return true;
       }
       catch(err){
          return false;
       }
    };
}

//app.product module
angular.module("app.product", []);

在 appController 中创建方法不起作用。下面仅返回 false:

<ul class="nav">
  <li>...</li>
<li ng-if="vm.moduleExists('product')"><a ui-sref="productList">Products</a></li>
  <li ng-if="vm.moduleExists('product')"><a ui-sref="productAdd({productId:0})>Create New Product</a></li>
</ul>

Answer 1

更新:您似乎有某种误解。

如果您的模块定义与问题中的方式相同:

angular.module("app", ['ui.router',"app.product"]);

并且您不会定义 ui.router 或 app.product 模块，您的 app 模块将引发异常。检查jsfiddle .

Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module app.product due to:
Error: [$injector:nomod] Module 'app.product' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

所以你的模块将永远在这里。

这不是“有 Angular ”的做事方式。如果您将 app.product 作为依赖项包含在内，则始终会为您的代码定义它，否则 Angular 应用程序甚至无法启动。

但是，您始终可以使用 $injector 作为依赖项，并询问它是否存在具有特定名称的依赖项。

angular.module('app').controller('myCtrl', myCtrl)

myCtrl.$inject = ['$scope','$injector']


function myCtrl($scope, $injector) {

   $scope.moduleProductExists= $injector.has('product')

}

并在ng-if中使用它

 <li ng-if="moduleProductExists"><a ui-sref="productList">Products</a></li>

但是请注意，它正在检查 Controller /服务/指令是否存在，而不是整个模块。

如果您尝试使用依赖项做一些奇特的事情，请提供您的问题的更多详细信息。