Question

这是我的html和angular js代码

<html>
<head>
    <title></title>
    <script src="Scripts/angular.min.js" type="text/javascript"></script>
    <script type="text/javascript" language="javascript">
        function DemoController($scope) {
            $scope.user = {
                dateOfBirth: new Date(1970, 0, 1)
            }
        }
    </script>
</head>
<body>
    <div ng-app="demo" ng-controller="DemoController">
        Date Of Birth:
        <my-datepicker type="text" ng-model="user.dateOfBirth" />
        <br>
        Current user's date of birth: <span id="dateOfBirthDisplay">{{user.dateOfBirth}}</span>
    </div>
</body>
</html>

它不起作用并提供输出

    Date Of Birth: 
    Current user's date of birth: {{user.dateOfBirth}}

但是，如果我从div中的="demo"中移除ng-app="demo"，那就可以了......

Answer 1

为ng-app指令指定名称时，实质上是创建一个具有该名称的模块。在此模块中，您将必须定义指令，服务，过滤器和配置。

在您的情况下，当您指定名称“demo”时，您创建了一个名为“demo”的模块。函数DemoController现在不再是此模块的一部分。

要使用此功能并将模块分配给您的应用程序，您需要使用以下定义控制器的方式：

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

app.controller('DemoController', [function () {
    //The body of demo controller
}]);

这样，应用程序就知道哪个模块的控制器需要与相应视图的范围相关联。

编辑：The ng-app directive reference

Answer 2

我的解决方案有效，请尝试：http://plnkr.co/edit/zwOKitT8wznO17yZfz15?p=preview

<body ng-app="">
    <div ng-controller="DemoController">
        Date Of Birth:
        <br>
        Current user's date of birth: <span id="dateOfBirthDisplay"><span ng-bind="user.dateOfBirth"></span></span>
    </div>
</body>

Answer 3

ng-app属性defines应用程序的module名称的值。在你的情况下，这是“演示”。虽然您没有在模拟“demo”中声明DemoController，但使用angular.module调用，它在您的ng-app html中不可见，在“demo”模块的范围内执行。< / p>

对ng-app="demo"有用的是：

<script type="text/javascript" language="javascript">
    angular.module('demo', []).controller('DemoController', function ($scope) {
        $scope.user = {
            dateOfBirth: new Date(1970, 0, 1)
        }
    });
</script>

在angular js div中使用app name不起作用

3 个答案: