角度控制器声明

我正在读取

https://www.syncfusion.com/resources/techportal/ebooks/angularjs

书中关于控制器基本用法的第三个例子对我来说不起作用：

JS:

function MyCtrl($scope) {
    $scope.visible = true;
    $scope.toggle = function() { $scope.visible = !$scope.visible; };
};

Html:

<html>
<head>
    <script src="scripts/vendor/angular/angular.min.js"></script>
    <script src="scripts/controllers/app.js"></script>
</head>
<body ng-app>
    <div ng-controller="MyCtrl"> <button ng-click="toggle()">Toggle</button> 
        <p ng-show="visible">Hello World!</p> 
    </div>
</body>
</html>

错误：

[ng:areq] http://errors.angularjs.org/1.3.0-rc.4/ng/areq?p0=MyCtrl&p1=not%20a%20function%2C%20got%20undefined

Angular对控制器不满意，不知道我用对了还是这本书过时了？在Angular网站上，我看到了更复杂的控制器声明的样本。

从上的版本（当然是1.3.0-x上的版本）开始，Angular要求您明确允许将控制器声明为全局函数。请参阅$controllerProvider的文档。

allowGlobals（）

如果调用，则允许$controller在窗口上查找控制器构造函数

因此，您的解决方案是：

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

上面的模块有要调用，所以它要么是您的主模块，要么是您应该依赖它的主模块。

您错过了一些东西，请参阅下面的代码片段

var app=angular.module('app', [])
app.controller('MyCtrl',MyCtrl);
function MyCtrl($scope) {
    $scope.visible = true;
    $scope.toggle = function() { $scope.visible = !$scope.visible; };
};

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html>
<head>
    <script src="scripts/vendor/angular/angular.min.js"></script>
    <script src="scripts/controllers/app.js"></script>
</head>
<body ng-app="app">
    <div ng-controller="MyCtrl"> <button ng-click="toggle()">Toggle</button> 
        <p ng-show="visible">Hello World!</p> 
    </div>
</body>
</html>

一开始，将控制器和模板粘合在一起有点棘手@sss展示了它是如何做到的。为了检查其他一切是否正常，您可以将脚本放入html页面。注意，这只是为了调试，我意识到这不是您想要的。给初学者一个提示：

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.8/angular.js"></script>
</head>
<body ng-app>
<script>
    function MyCtrl($scope) {
        $scope.visible = true;
        $scope.toggle = function() { $scope.visible = !$scope.visible; };
    };
</script>
<div ng-controller="MyCtrl"> <button ng-click="toggle()">Toggle</button>
    <p ng-show="visible">Hello World!</p>
</div>
</body>
</html>

这是angular docs 中最简单的例子

var myApp = angular.module('myApp',[]);
myApp.controller('GreetingController', ['$scope', function($scope) {
  $scope.greeting = 'Hola!';
}]);

<html>
<head>
    <script src="scripts/vendor/angular/angular.min.js"></script>
    <script src="scripts/controllers/app.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="GreetingController">
{{ greeting }}
</div>
</body>

你错过了var myApp = angular.module('myApp',[]);和<body ng-app="myapp">，我建议你仔细阅读angular文档。

allowGlobals（）

相关内容

最新更新

热门标签：