繁体   English   中英

ng-app的输出

[英]Output for ng-app

为什么第二个div标签的输出显示正常? 为什么没有Angular js绑定呢?

你能解释一下吗?

<!DOCTYPE html>
<html>
<head>
    <title>Angular JS Demo</title>
    <script src="scripts/angular.min.js"></script> 
    <script src="scripts/Script.js"></script>
    <meta charset="utf-8" />
</head>
<body>

    <div ng-app="myApp1" ng-controller="myCtrl">
        {{ first_name +" "+ last_name }}
    </div>

    <div ng-app>
        10 +20 = {{ 10 + 20 }}
        {{ 1 == 2 }}
        {{ ['ajay','kumar','hari','bag'][0] }}
    </div>
    <script>
        var my_module = angular.module("myApp1", []);
        var my_Controller = function ($scope) {
            $scope.first_name = "vijay";
            $scope.last_name = "kumar";
        }
        my_module.controller("myCtrl", my_Controller);
    </script>
</body>
</html>

-----------输出------

维杰·库玛

10 +20 = {{ 10 + 20 }} {{ 1 == 2 }} {{ ['ajay','kumar','hari','bag'][0] }}

尝试这样。

 var app = angular.module('myApp1', []); app.controller('myCtrl', function($scope) { $scope.first_name = "vijay"; $scope.last_name = "kumar"; }); 
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <body > <div ng-app="myApp1" ng-controller="myCtrl"> {{ first_name +" "+ last_name }} <div> 10 +20 = {{ 10 + 20 }} {{ 1 == 2 }} {{ ['ajay','kumar','hari','bag'][0] }} </div> </div> </body> 

如AngularJS文档中所指定,每个HTML文档只能自动引导一个AngularJS应用程序。 在文档中找到的第一个ng-app将用于定义根元素以作为应用程序自动引导。 如果要使用其他ng-app,则应手动引导该应用。

有关详细说明,请参见angularJS文档部分。 https://docs.angularjs.org/api/ng/directive/ngApp

从AngularJS 文档 -

每个HTML文档只能自动引导一个AngularJS应用程序。

换句话说,ng-app指令在整个应用程序中只能使用一次。 小号

就您而言,ng-app 仅限于一个div标签。 在此div标签之外,无法访问angularjs的功能。 您可以使用ng-app指令来设置父div,然后是当前div。 或者只是您的body标签中的指令。

 <!DOCTYPE html> <html> <head> <title>Angular JS Demo</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script> <script src="scripts/Script.js"></script> <meta charset="utf-8" /> </head> <body> <div ng-app="myApp1"> <!-- parent div --> <div ng-controller="myCtrl"> {{ first_name +" "+ last_name }} </div> <div ng-app> 10 +20 = {{ 10 + 20 }} {{ 1 == 2 }} {{ ['ajay','kumar','hari','bag'][0] }} </div> </div> <script> var my_module = angular.module("myApp1", []); var my_Controller = function ($scope) { $scope.first_name = "vijay"; $scope.last_name = "kumar"; } my_module.controller("myCtrl", my_Controller); </script> </body> </html> 

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM