Question

我是AngularJS的新手。当我创建一个控制器时，我看到了两个例子，展示了如何以不同的方式做到这一点。然而，最能表现出来的是如何做到这一点。

第一个问题是它要么找不到模块，要么找不到该功能。它最终与{{type}} {{name}}一样。如果我尝试plnkr然后第一个工作。

'dataControl'不是函数，未定义

我得到的错误

如果我有我的HTML。

<html ng-app>
<head>

</head>


<body ng-app="docsBindExample">

<script src="../bower_components/angular/angular.min.js"> </script>
<script src="../scripts/controllers/main.js"></script>


<div ng-controller="dataControl">

    <select id="selected" ng-model="type">
        <option>Total Revenue</option>
        <option>Total Expenditure</option>
        <option>Total Number of Events</option>
        <option>Amount of Mail</option>
        <option>Average Delivery Times</option>
        <option>Critical Routes</option>

    </select>

    {{type}}
    {{data}}

    <ul>
        <li ng-repeat="values in data">
            {{values.dataName}}
            {{values.dataValue}}
        </li>
    </ul>

</div>
</body>
</html>

然后是第一个无法工作的控制器。

angular.module('docsBindExample', [])
    .controller('dataControl', ['$scope', function($scope) {


        $scope.name = 'Value Is here';
    }]);

其次，另一个有效的控制器

function dataControl ($scope) {


    $scope.name = 'Value Is here';
}

使用第二个是否有任何退缩？

Answer 1

使用第二种方法没有任何这样的缺点。然而，对于大型应用程序而言，第一种方法非常方便，因为您将定义模块并为模块注册控制器，过滤器等。你的第一个方法背后的原因是不工作可能是你没有定义docsBindExample模块。试着这样做：

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

然后是您的控制器定义。

Answer 2

从语法上讲，两者都很完美，但建议采用第一种方法而不是第二种方法。在第一种方法中，控制器将附加到该模块，并且是构建应用程序的良好实践有关详细信息，请访问此链接
https://docs.angularjs.org/guide/controller

执行代码时没有错误。

Answer 3

您的代码正在为我工作!!!!

检查：http://plnkr.co/edit/hrkSDOinTcMEmPLcttut

也许Stackoveflow的这个链接适合你!!!

AngularJS - different ways to create controllers and services, why?

Globally defined AngularJS controllers and encapsulation

Answer 4

第一种肯定是推荐的方式（如果没有别的，因为它确实对全局对象进行了规范）我自己没有尝试过，但我很确定当你的应用程序变得更复杂（有超过1个模块和/或外部依赖项）时你会遇到麻烦。

您得到的错误可能是由于某些JS错误（例如语法错误）导致dataControl无法注册为控制器。

不幸的是，这些错误令人烦恼且难以追查我建议注释掉控制器定义中的所有代码，然后通过nlock取消注释阻塞，直到找到有问题的行。

<子> 对我来说，不止一次，这种错误是由错误的对象声明引起的：
例如。 {prop = val}代替{prop: val}或{p1:v1; p2:v2}代替{p1:v1, p2:v2}

Answer 5

尝试将其更改为：

.controller('dataControl', function($scope) {
   //more code
 });

Answer 6

尝试使用以下

<强> Working Demo

<强> HTML

<div ng-app="docsBindExample">
<div ng-controller="dataControl">

    <select id="selected" ng-model="type">
        <option>Total Revenue</option>
        <option>Total Expenditure</option>
        <option>Total Number of Events</option>
        <option>Amount of Mail</option>
        <option>Average Delivery Times</option>
        <option>Critical Routes</option>

    </select>

    {{type}}
    {{data}}

    <ul>
        <li ng-repeat="values in data">
            {{values.dataName}}
            {{values.dataValue}}
        </li>
    </ul>
</div>
</div>

<强>脚本

var app = angular.module('docsBindExample', []);
app.controller('dataControl', function ($scope) {
   $scope.name = 'Value Is here';
});

AngularJS - 创建控制器之间的区别

6 个答案: