Question

我是Angular JS的新手。对不起这个简单的问题。

我从本教程中学到了一些东西：http://courseware.codeschool.com/shaping-up-with-angular-js/Slides/level01-05.pdf

我试过一个例子。这不起作用。的 http://jsfiddle.net/89wfv/1/

HTML：

<html ng-app="main">
    <body>
    <div ng-controller="con">

        <div>{{con.desc}}</div>
        <input type='button' ng-click='getDesc();' value='Get name' />
    </div>
    </body>
</html>

脚本

(function() {

    var app = angular.module("main", []);

    app.controller("con", function() {

        this.desc = "test description";

        this.getDesc = function() {
            alert(this.desc);
        }

    });

})();

问题是通过点击显示div和警报说明中的描述。

提前致谢。

Answer 1

你忘记了控制器

<div ng-controller="con as ctrl">

    <div>{{ctrl.desc}}</div>
    <input type='button' ng-click='ctrl.getDesc();' value='Get name' />
</div>

请看一下指南：

https://docs.angularjs.org/guide/controller

工作的：

http://jsfiddle.net/pYh89/

你没有正确加载角度并添加了几个语法错误。

var app = angular.module("main", []);
app.controller("con", function () {

    this.name = 'foo';

    this.getName = function () {
        alert("foo");
    };

});

Answer 2

您的代码中缺少Angular JS，请在下载后加入。

<script src="angular.js"></script>

您也可以使用在线版本。

Answer 3

你忘记了不同的事情：

这是一个纠正过的JSfiddle：

http://jsfiddle.net/89wfv/2/

你必须：

使用$scope代替this来引用要绑定到视图的数据，例如：

app.controller("con", function($scope) {

   $scope.name = 'vasu';

   $scope.getName = function() {
       alert();
   }

});

将脚本标记放在Head
不使用可能被JSfiddle覆盖的html标记：

请做这样的事情：

<div ng-app="main">
    <div ng-controller="con">
    </div>
</div>

Angular JS：控制器属性未在html中显示

3 个答案: