Question

我很难将角度控制器'pointofsaleController'绑定到视图（index.cshtml）。

你能帮我弄清楚我在哪里弄错了。它是在使用visual studio构建的MVC项目中。

pointofsaleController.js

(function(ng) {

	var controllersModule = ng.module('pos.controllers');

	controllersModule.controller('pointofsaleController', ["$scope", function($scope) {
		//Why is this line not getting executed.
		alert('Here');

		$scope.myArr = ['Mango', 'Apple', 'Oranges'];

	}]);

})(angular);

posRouter.js

(function(ng) {
	// App Module Definition (relies on other modules)
	var posApp = ng.module("posApp", ['ngRoute']);

	var controllers = ng.module("pos.controllers", []);
	var directives = ng.module("pos.directives", []);

	
})(angular);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.min.js"></script>

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
    ViewBag.Title = "Point of Sale";
}




<script>
    function redirectTo(nameRange) {
        //window.location = '/pointofsale/tenantview?nameRange='+nameRange;
    };
</script>

<div class="name-range-screen" ng-controller="pointofsaleController">
    <div ng-view />
    
</div>

@using System.Web.Optimization

<html ng-app="posApp">
<head>
    <title></title>

    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js" ></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-route.js" ></script>
     @Scripts.Render("~/ViewScripts/POSScripts")
</head>
<body >
    <div id="header">
        <h1>Welcome to point of sale by SCS.</h1>
    </div>
    <div id="content">
        @RenderBody()
    </div>
    <div id="footer">
        Dashboard
    </div>
     
</body>
</html>

由于一些奇怪的原因，我的应用程序已初始化模块，但控制器无法初始化，因此我找不到模块错误。就是这样，

这是我从Chrome调试器控制台获得的错误。

错误：[ng：areq]参数'pointofsaleController'不是函数，未定义 http://errors.angularjs.org/1.2.26/ng/areq?p0=pointofsaleController&p1=not%20a%20function%2C%20got%20undefined 在ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js:78:12 在assertArg（ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js:1509:11）在assertArgFn（ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js:1519:3） at ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js:7278:9 at ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js:6670:34 在forEach（ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js:332:20）在nodeLinkFn（ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js:6657:11）在compositeLinkFn（ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js:6105:13）在compositeLinkFn（ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js:6108:13）在compositeLinkFn（ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js:6108:13）

谢谢， BR

Answer 1

在您的js（pointofsaleController.js）中，您目前拥有：

var controllersModule = ng.module('pos.controllers');

为了创建必须使用的角度模块，获取模块而不是创建模块：

var controllersModule = ng.module('pos.controllers', []);

<强>更新

由于您将控制器放在一个单独的模块中，您需要将该模块注入您的应用模块，这将改变这一点：

var posApp = ng.module("posApp", ['ngRoute']);

到此：

var posApp = ng.module("posApp", ['ngRoute', 'pos.controllers', 'pos.directives']);

Answer 2

扩展Brocco所说的，Angular与模块交互的方式有两种：set和get

对于设置一个通常是一次性的模块，这很简单：

var app = ng.module("myApp", [])

如果存在对其他模块的依赖，则可以在[]数组中包含其他模块。

要获取先前设置的模块，您可以通过以下方式引用该模块：

var app = ng.module("myApp")

您始终需要先使用set方法启动应用。一旦将模块设置在其他位置，就可以使用模块。这对于更大的应用程序非常有用，在这些应用程序中，您可以找到在app.js中设置和定义为单行的应用程序，而所有控制器和指令代码都存在于其他文件中，现在将使用get方法返回到先前设置/定义的模块。

捆绑角度控制器查看

2 个答案: