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-无法实例化模块

回答

相关问题