10-指令ng-model-$scope

最新推荐文章于 2020-07-20 17:34:51 发布

jojo999888

最新推荐文章于 2020-07-20 17:34:51 发布

阅读量319

点赞数

分类专栏： angularJS 文章标签： angularjs

本文链接：https://blog.csdn.net/gc_20160403/article/details/76034465

版权

angularJS 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

<!--可以定义多个controller-->
<!DOCTYPE html>
<html lang="en" ng-app='myApp'>
    <head>
        <meta charset="utf-8">
        <script src="js/angular.js"></script>
    </head>
    <body>
        <div ng-controller="myCtrl1">
            <h1>我来自controller1  {{name}}</h1>
            <h1>{{greeting}}</h1>
            <button ng-click='sayHello()'>点我,显示欢迎标语呀</button>
        </div>
        <div ng-controller="myCtrl2">
            <h1>我来自controller2  {{name}}</h1>
        </div>      
        <div ng-controller="myCtrl3">
            <h1>我来自controller3的全局变量$rootScope， 我等于 {{age}}</h1>
        </div>
        <div ng-controller="myCtrl4">
            <h1>我来自controller4</h1>
            <ul>
                <li ng-repeat="x in names">{{x}}</li>
            </ul>
        </div>
    </body>
    <script type="text/javascript">
    var app = angular.module('myApp',[]);

    <!--定义controller1-->
    app.controller('myCtrl1',function($scope){
        $scope.name='james';
        $scope.sayHello = function(){
            $scope.greeting='hello '+$scope.name+'!';
        }
    })

    <!--定义controller2-->
    app.controller('myCtrl2',function($scope){

        $scope.name='james2';
    })    
    <!--定义controller3-->
    app.controller('myCtrl3',function($scope,$rootScope ){

        $scope.name='james3';
        $rootScope.age=100;
    })
    <!--定义controller4-->
    app.controller('myCtrl4',function($scope,$rootScope ){

        $scope.names = ["Emil", "Tobias", "Linus"];
        $rootScope.age=100;
    })
    </script>
</html>

jojo999888

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
10-指令ng-model-$scope

<!DOCTYPE html><html lang="en" ng-app='myApp'> <head> <meta charset="utf-8"> <script src="js/angular.js"></script> </head> <body> <div ng-co
复制链接

扫一扫