2015-11-12 102 views
0

我做Angularjs的过程中,我所要做的工作,但对我来说是IMPOSIBLE运行此:

app.js:

function OcultarController($scope) { 
    $scope.oculto = true; 

    $scope.cambioColor = function() { 
    $scope.oculto = !$scope.oculto; 
    }; 
} 

angular.module('app', []); 
angular.module('myModule').config(['$controllerProvider', function($controllerProvider) { 
    $controllerProvider.allowGlobals(); 
}]); 

的index.html

<html ng-app="app"> 
    <head> 
    <meta charset="utf-8"> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> 
    <script src="app.js"></script> 
    </head> 

    <body> 
    <div ng-controller="OcultarController"> 
     <p style="background-color:red;" ng-show="oculto">ROJO</p> 
     <p style="background-color:green;" ng-hide="oculto">VERDE</p> 
     <button ng-click="cambioColor()">Cambiar color</button> 
    </div> 
    </body> 
</html> 

我试着让它工作,但我做不到,我在Angularjs新手,我不知道如果我做得很好,这次演习只是告诉我复制代码,但我看到的并不那么容易。

控制台告诉我(我用firefox):

Error: [$injector:nomod] http://errors.angularjs.org/1.3.15/$injector/nomod?p0=myModule angular.min.js:6:417 
"Error: [ng:areq] http://errors.angularjs.org/1.3.15 /ng/areq?p0=OcultarController&p1=not%20a%20function%2C%20got%20undefined 
R/<@https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:6:417 
[email protected]://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:19:1 
[email protected]://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:20:78 
Fe/this.$get</<@https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:75:396 
B/<@https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:57:100 
[email protected]://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:7:406 
[email protected]://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:56:471 
[email protected]://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:51:335 
[email protected]://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:51:352 
[email protected]://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:51:352 
D/<@https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:50:444 
uc/d/</<@https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15 /angular.min.js:18:4 
Pe/this.$get</[email protected]://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:126:11 
Pe/this.$get</[email protected]://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:126:236 
uc/d/<@https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:17:477 
[email protected]://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:36:313 
uc/[email protected]://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:17:1 
[email protected]://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:18:179 
[email protected]://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:17:1 
@https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:250:429 
[email protected]://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:164:283 
lf/[email protected]://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:32:384 
" 
+0

''=>您缺少一个” 在这里 –

+0

改变这种HTML负荷,但错误依然存在 –

+0

使用不精缩的角度看可读的错误。 [_Module'myModule'不可用!您拼错了模块名称或忘记加载模块名称。如果注册一个模块,确保你指定依赖关系作为第二个参数._](https://docs.angularjs.org/error/$injector/nomod?p0=myModule) – Grundy

回答

1

首先,你在这里创建两个模块(这不一定是一个问题,但在你的情况我想你不需要一个):

angular.module('app', []); 
angular.module('myModule'). 

将其更改为:

var app = angular.module('app', []); 
app.config(['$controllerProvider', function($controllerProvider) { 
    $controllerProvider.allowGlobals(); 
}]); 

app.controller('OcultarController', OcultarController); 
+0

完美!!!!这对我有用,谢谢!你能解释给我吗?因为我想使用全局函数作为控制器,但是我在这里看到的是,我将它作为适当的函数来进行分配。 –

+0

@JoseteManu你只是没有创建名为_myModule_的模块,但尝试使用它 – Grundy

+0

这里没有太多解释。 'app'变量将保存名为“app”的角度模块的引用(这可以是任何你想要的),并且你可以在其上设置配置。此外,你告诉角你在你的应用模块中有一个名为“OcultarController”的控制器。 – laszlokiss88

0

你必须告诉你的 “应用程序”,它应加载你的模块“myModule”。

变化

angular.module('app', []); 

angular.module('app', ['myModule']); 

,并将其移动到文件的结尾。

0

普拉克:http://plnkr.co/edit/Vx5FuIemuj636r3ixzWt?p=preview

angular.module('app', []).controller("OcultarController", ["$scope", function($scope) { 
    $scope.oculto = true; 

    $scope.cambioColor = function() { 
    $scope.oculto = !$scope.oculto; 
    }; 
}]).config(['$controllerProvider', function($controllerProvider) { 
    $controllerProvider.allowGlobals(); 
}]); 
相关问题