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> 

這不工作.... 我試圖創建一個返回一個布爾值的方法，並且不與NG-如果擦出火花。

什麼樣的令人沮喪的是，它的工作原理，如果我手動硬編碼的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不起作用。這只是返回如下錯誤：

<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

UPDATE：你似乎有某種misconseption的。

如果你有你的模塊定義你有它在你的問題的方式：

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

而且你不會定義ui.router或app.product模塊，您app模塊將拋出exeption。檢查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. 

所以你的模塊將永遠在這裏。

這不是「有角度」的做事方式。如果包含app.product作爲依賴關係，它將始終爲您的代碼定義，否則角度應用程序甚至不會啓動。

但是，您始終可以使用$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> 

被勸它檢查是否控制器/服務/指令的存在，而不是整個模塊。

如果您正在嘗試做一些充滿依賴性的事情，請提供您的問題的更多詳細信息。