9、Controller高级应用（继承、Controller间通信）

最新推荐文章于 2022-05-17 11:48:49 发布

4911071420313

最新推荐文章于 2022-05-17 11:48:49 发布

阅读量3.5k

点赞数

分类专栏： angular_智能社

angular_智能社专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1、数据共享—多个controller之间

1）父子controller


$scope 能继承---子controller复制了父controller的$scope
    “不能叫同步，只是复制”

消息机制（事件）：

$scope.$emit('名字',数据); // 触发：自己 + 父级 向上发送
$scope.$broadcast('名字',数据); // 触发：自己 + 子级 向下发送
$scope.$on('名字',数据);   // 接收

<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <script>
        var app = angular.module('test',[]);
        app.controller('con1',function($scope){
            $scope.$on('new_event',function(event,data){
                // event 事件对象
                // data 数据
                alert(event.name);  // new_event
                alert(data.a); // 5
            });
        });
        app.controller('con2',function($scope){
            $scope.fn = function(){
                $scope.$emit('new_event',{a:5,b:6});
            };
        });

    </script>
</head>
<body>

<div ng-app="test" ng-controller="con1">
    <div ng-controller="con2">
        <input type="button" value="emit" ng-click="fn();"/>
    </div>
</div>

</body>
</html>

2）无关controller
用自定义依赖来存储数据
factory、service、provider —创建的依赖只有一个，所以可以共享数据

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <script>
        var app = angular.module('test',[]);
        app.factory('dataShare',function(){
            return {
                a:12
            }
        });
        app.controller('con1',function($scope,dataShare){
            alert(dataShare.a); // 12
            dataShare.a = 13;
        });
        app.controller('con2',function($scope,dataShare){
            alert(dataShare.a); // 13
        });

    </script>
</head>
<body>
<div ng-app="test">
    <div ng-controller="con1"></div>
    <div ng-controller="con2"></div>
</div>
</body>
</html>

2、router 多视图

根据URL来切换视图

router开发步骤：
1）引入文件

<script src="angular-route.js"></script>

2）引入ngRoute模块

var app = angular.module('test',['ngRoute']);

3）配置route

app.config(function($routeProvider){
    $routeProvider.when(
        '地址',
        {
            '配置信息'
        }
    )
})
// 配置信息
// template/templateURL
// controller
// resolve

Router 事件：
$routeChangeStart$ routeChangeSuccess
$routeChangeError

$scope.$on('$routeChangeStart',function(event,next,current){
})

4911071420313

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
9、Controller高级应用（继承、Controller间通信）

1、数据共享—多个controller之间1）父子controller$scope 能继承---子controller复制了父controller的$scope “不能叫同步，只是复制”消息机制（事件）：$scope.$emit('名字',数据); // 触发：自己 + 父级向上发送$scope.$broadcast('名字',数据); // 触发：自己 + ...
复制链接

扫一扫

专栏目录