Question

我是angularjs的新人。我想要做的是在角应用程序中添加一个简单的控制器。所以，我的代码是这样的 -

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
        <div ng-app="">
            <div ng-init="mySwitch=true">
                <p>
                <button ng-disabled="mySwitch">Click Me!</button>
                </p>
                <p>
                <input type="checkbox" ng-model="mySwitch"/>Button Disable
                </p>
                <p>
                {{ mySwitch }}
                </p>
            </div>
        </div>
    </body>
    <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</html>

所以，它运作得很好 -

当我添加ng-controller="anything"时......

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
        <div ng-app="">
            <div ng-controller="anything" ng-init="mySwitch=true">
                <p>
                <button ng-disabled="mySwitch">Click Me!</button>
                </p>
                <p>
                <input type="checkbox" ng-model="mySwitch"/>Button Disable
                </p>
                <p>
                {{ mySwitch }}
                </p>
            </div>
        </div>
    </body>
    <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</html>

似乎没什么用。

任何人都可以帮忙，我做错了什么？

提前感谢您的帮助。

Answer 1

看起来您还没有定义控制器。请注意以下内容......

<div ng-app="app">
    <div ng-controller="ctrl">
[...]

angular.module('app', []).controller('ctrl', function($scope) {
    $scope.mySwitch = true;
});

JSFiddle Link - 工作演示

与往常一样，请参阅Understanding Controllers文档以获取更多信息。

Answer 2

在第一步中，您需要为您的应用声明一个名称

例如

Module.js

var home = angular.module("home",['ngRoute']);

之后在控制器中调用此变量

Controller.js

home.controller('homeController',function($scope){
  $scope.switch = value;
});

你的代码中的

的index.html

<!DOCTYPE html>
<html ng-app="home">

<div ng-controller="homeController" >
 {{switch}}
</div>

Angular.JS - 添加Controller

2 个答案: