AngularJs-無法實例化模塊

我會給腳本標記和一段JavaScript到另一個域。這將是一個小部件項目。當其他網站將我的JavaScript放入他們的網站時，我的JavaScript將被加載並注入小部件的html。

Widget的html是用Angular構建的，當我直接調用這個html時它工作的很好，但是當它被注入到另一個頁面時它不工作。

這是一些代碼。

這是我如何注入控件的HTML：

var widget = { 
    initialize : function(containerId) 
    { 

     $("#" + containerId).load("widget.html"); 

    } 
}

我的窗口小部件的HTML

<script src="http://localhost:8000/bower_components/angular/angular.js"></script> 
<script src="../Controllers/phoneController.js"></script> 


<div ng-app="phonecatApp"> 
     <ul ng-controller="PhoneListCtrl"> 
    <li ng-repeat="phone in phones"> 
     <span>{{phone.name}}</span> 
     <p>{{phone.snippet}}</p> 
     {{2+2}} 
    </li> 
    </ul> 


</div> 


</div>

A-和我的控制器：

var phonecatApp = angular.module('phonecatApp', []); 

phonecatApp.controller('PhoneListCtrl', function ($scope) { 
    $scope.phones = [ 
    {'name': 'Nexus S', 
    'snippet': 'Fast just got faster with Nexus S.'}, 
    {'name': 'Motorola XOOM™ with Wi-Fi', 
    'snippet': 'The Next, Next Generation tablet.'}, 
    {'name': 'MOTOROLA XOOM™', 
    'snippet': 'The Next, Next Generation tablet.'} 
    ]; 
});

在控制檯中的異常：

Uncaught Error: [$injector:modulerr] Failed to instantiate module phonecatApp due to: Error: [$injector:nomod] Module 'phonecatApp' 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.

編輯：我的html中有{{2 + 2}}代碼，只是爲了測試Angular。它沒有被Angular評估過，而是直接打印到html中。

來源

2014-12-24 erkan demir

你確定'phoneController.js'的路徑是正確的嗎？由於您使用的是相對路徑，因此可能不會指向您的想法。 –

@PatrickEvans我確定控制器已加載。我可以在開發板的網絡部分看到。 –

我還會研究ng-app是否在您的phoneController.js代碼加載之前嘗試啓動應用程序。（通常這會等待，但可能已經發生）。 – Hargobind

試試這個代碼：

phonecatApp.controller('PhoneListCtrl', '$scope', [function ($scope) { 
    $scope.phones = [ 
    {'name': 'Nexus S', 'snippet': 'Fast just got faster with Nexus S.'}, 
    {'name': 'Motorola XOOM™ with Wi-Fi', 'snippet': 'The Next, Next Generation tablet.'}, 
    {'name': 'MOTOROLA XOOM™','snippet': 'The Next, Next Generation tablet.'} 
    ]; 
}]);

我所做的只是改變了依賴注入語法。我懷疑你的JS被縮小時發生了問題。使用我寫的風格將解決這個問題。

來源

2014-12-24 21:08:26 nairys

AngularJs-無法實例化模塊

回答

相關問題