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

Question

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

在主导航中，我创建了指向相关视图的链接。以下 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>

这行不通.... 我尝试创建一个方法，该方法 returns 一个 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/service/directive 是否存在，而不是整个模块。

如果你想做一些有依赖性的异国情调，请为你的问题提供更多细节。

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

AngularJS Checking if module exists using NG-IF

javascript

module

angularjs