angular在一个页面中使用两个ng-app的方法 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/angular.js" ></script>
    </head>
    <body>
        <div ng-app="myApp" ng-controller="ctrl">
            <h2 ng-bind="name"></h2>
            <h1>{{name}}</h1>
            <input type="text" ng-model="name" />
        </div>
        
        <div ng-app="hd" ng-controller="test">
            商品名称：{{goods.title}}<br />
            商品价格：{{goods.price}}<br />
            购买数量：{{goods.num}}件<br />
            总计：{{goods.price*goods.num}}元<br />
            <button ng-click="add()">增加</button>
            <button ng-click="reduce()">减少</button>
        </div>
        <script>
            angular.module("myApp",[]).controller("ctrl",["$scope",function ($scope){
                $scope.name="活动时间发的";//angular中的$scope相当于viewModel
            }]);
            
            angular.module("hd",[]).controller("test",["$scope",function ($scope){
                $scope.goods={"title":"apple mac","price":300,"num":0}
                $scope.add=function (){
                    $scope.goods.num=Math.min(++$scope.goods.num,8);
                    //Math.min(x,y):返回指定的数字中带有最低值的数字
                }
                $scope.reduce=function (){
                    $scope.goods.num=Math.max(--$scope.goods.num,0);
                    //Math.max(x,y):返回指定的数字中带有最高值的数字
                }
            }]);
            //手动的让第二个div被hd管理
            angular.bootstrap(document.querySelector('[ng-app="hd"]'),['hd']);</script>
    </body>
</html>

这种方法不推荐使用，请看第二种方法：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/angular.js" ></script>
    </head>
    <body>
        <div ng-app="conApp">
            <div ng-app="myApp" ng-controller="ctrl">
                <h2 ng-bind="name"></h2>
                <h1>{{name}}</h1>
                <input type="text" ng-model="name" />
            </div>
            
            <div ng-app="hd" ng-controller="test">
                商品名称：{{goods.title}}<br />
                商品价格：{{goods.price}}<br />
                购买数量：{{goods.num}}件<br />
                总计：{{goods.price*goods.num}}元<br />
                <button ng-click="add()">增加</button>
                <button ng-click="reduce()">减少</button>
            </div>
        </div>
        <script>
            angular.module("myApp",[]).controller("ctrl",["$scope",function ($scope){
                $scope.name="活动时间发的";//angular中的$scope相当于viewModel
            }]);
            
            angular.module("hd",[]).controller("test",["$scope",function ($scope){
                $scope.goods={"title":"apple mac","price":300,"num":0}
                $scope.add=function (){
                    $scope.goods.num=Math.min(++$scope.goods.num,8);
                    //Math.min(x,y):返回指定的数字中带有最低值的数字
                }
                $scope.reduce=function (){
                    $scope.goods.num=Math.max(--$scope.goods.num,0);
                    //Math.max(x,y):返回指定的数字中带有最高值的数字
                }
            }]);
            
            //用一个大的模块将两个小模块包起来
            angular.module("conApp",["myApp","hd"]);
        </script>
    </body>
</html>

显示效果：

posted @ 2018-01-11 10:49  爽朗琴天  阅读(158)  评论(0)    收藏  举报