AngularJs多个控制器例子

最新推荐文章于 2020-09-25 09:33:16 发布
suanday_sunny
最新推荐文章于 2020-09-25 09:33:16 发布
阅读量727
点赞数 1
文章标签： angular
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多个控制器例子</title>
    <!--控制器间的通讯：
            1.继承方式通讯：不需要写额外的代码，方便，但有局限
            2.基于事件方式：广播，向上传播，向下传播，要写额外的代码
        注意：继承要将子类controller放在父类controller里面，
        不然不能继承父类controller的东西
    -->
    <script src="./script/lib/angularjs/angularjs/angular-1.5.8.js"></script>
    <script>
        var app=angular.module("manyControllerDemo",[]);

        //一个汤姆妈妈的控制器
        app.controller("MonCtrl",function($scope){
            $scope.name="汤姆的妈妈";
            $scope.addr="幸福路1号";
            $scope.ChangeHouse=function(){
              $scope.addr="欢乐路3号";
            };
            //他妈妈知道她女票找他于是把消息传到了他那里去
            $scope.$on("CallTom",function(){
                $scope.$broadcast("friend");
            });
        });

        //一个汤姆的控制器
        app.controller("TomCtrl",function($scope){
            $scope.name="汤姆";
            $scope.mobile="待机";
            //他知道了于是看来下手机，女票果然在打电话给他
            $scope.$on("friend",function(){
                $scope.mobile="girlfriend来电。。。 ";
            });
        });

        //一个汤姆女票的控制器
        app.controller("gfCtrl",function($scope){
            $scope.name="汤姆的女票";
            $scope.mobile="待机";
            $scope.Call=function(){
                $scope.mobile="呼叫汤姆...";
                //通过它把他女票呼叫汤姆的消息传到他妈妈那里去
                $scope.$emit("CallTom");
            }
        });
    </script>
</head>
<body ng-app="manyControllerDemo">
    <div ng-controller="MonCtrl" style="margin-bottom: 50px;">
        <ul>
            <li><h1>{{name}}</h1></li>
            <li><h3>{{addr}}</h3></li>
            <li><button ng-click="ChangeHouse()">换房子</button></li>
        </ul><hr>
        <!--MonCtrl和TomCtrl就是通过继承传递对象。。。故事是这样的，
        汤姆和他妈妈要搬家，于是她妈妈换了房子，于是他也换了房子，
        就是页面所示点击换房子按钮，汤姆和他妈妈的房子地址都变了。。-->
        <div ng-controller="TomCtrl">
            <ul>
                <li><h1>{{name}}</h1></li>
                <li><h3>{{addr}}</h3></li>
                <li><h3>{{mobile}}</h3></li>
            </ul>
        </div><hr/>

        <!--gfCtrl和TomCtrl是基于事件传递对象,就是两个同级的控制器之间传递，
         那么。。。汤姆是一个有女票的人，于是这里有一个他女票的控制器，他和她女票没住在一起，
         那么联系的话就需要用手机打电话...有一天他女票想他了。就给他打了个电话。。-->
        <div ng-controller="gfCtrl">
            <ul>
                <li><h1>{{name}}</h1></li>
                <li><h3>{{mobile}}</h3></li>
                <li><button ng-click="Call()">呼叫Tom..</button></li>

            </ul>
        </div>
    </div>

</body>
</html
https://blog.youkuaiyun.com/cherishspring/article/details/51384940