Angularjs控制器之间的通信方式总结

利用angularjs开发项目中,控制器之间的通信,比如参数的传递,数据的传递,都是比较常见的。控制器之间的通信,显得尤为重要。常见的方式有如下两种:一、angular服务的方式;二、基于事件广播的方式;另外,还有基于作用域继承的方式。下面先说一下前两种方式:
一、基于angular服务的方式:

在angular中服务是一个单例,所以在服务中生成一个对象,该对象就可以利用依赖注入的方式在所有的控制器中共享。参照以下例子,在一个控制器修改了服务对象的值,在另一个控制器中获取到修改后的值:

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

app.factory('Myservice', function(){
    return {};
});
      //定义服务

app.controller('Ctrltest1', function($scope, 'Myservice') {
  $scope.change = function() {
       Myservice.name = $scope.test;   //在第一个控制器中为服务对象赋值
  };
});


app.controller('Ctrltst2', function($scope, 'Myservice') {
    $scope.add = function() {
        $scope.name = Myservice.name;  //将第一个控制器中为服务对象赋的值传给第二个控制器
    };
});

<div ng-controller='Ctrltest1'>
     <input type="text" ng-model="test" />
     <div ng-click="change()">click me</div>
<
</div>
<div ng-controller='Ctrltest2'>
    <div ng-click="add()">my name {{name}}</div>
</div>
二、基于事件广播的方式
基于事件广播,需要用到$emit()、$broadcaset()和$emit()这三个方法。


1.向父作用域层次结构发出自定义事件:使用$emit()方法,scope.$emit(name,[args,...])
注:name是事件名,args 是0个或多个参数。
应用场景:用于子页面控制器向父页面的控制器传递参数。

2.向子作用域层次结构广播自定义事件:

应用场景:用于父页面控制器向子页面的控制器传递参数或者同级控制器之间传递参数。



使用$broadcaset()方法,$scope.$broadcaset(name,[args,...])
注:name是事件名,args 是0个或多个参数.


3.使用侦听器处理自定义事件
为了处理发出或广播的事件,可以使用$on()方法。$on()方法将使用下面的语法:
$scope.$on(name,listener)
注:name 是将要侦听的事件的名字,listener参数是一个函数,它将接受事件作为第一个参数,接受$emit()或者$broadcaset()方法传递的其他所有参数作为随后的参数。$on()方法主要用于监听$emit()和$broadcaset()方法中事件的变化,例如这两个方法中如果有变量发生改变,$on()方法将会获取到该变量的改变。

参照以下例子,在一个控制器修改了变量的值,在另一个控制器中会侦听到修改后的值,并根据修改后的值,做出响应。

app.controller('versiontaskCtrl', function WriteTestcaseCtrl($scope, $cookies, $rootScope, $modal, $stateParams, ui, searchVariable,   currentuserversions,) {
    $scope.taskId = $cookies['edit_taskId'];
    $scope.versionid = parseInt($cookies['edit_versionId']);
    $scope.versionName = $cookies['edit_versionName'];
    $scope.version = $scope.versionid;
    getuserversions = function () {
        currentuserversions.get(function (res) {
            $scope.versions = res;
        });
    };
    reload = function () {
        getuserversions();
    };

    $scope.changeVersionid = function (v) {
        console.log(v);
        $scope.$broadcast('versionidChange', $scope.versionid); //向其他控制器广播$scope.versionid值的变化。

    };

    reload();
});

第二个控制器中监听第一个控制器中的广播事件:


app.controller('SchemeTaskEditableRowCtrl', function ($scope, $rootScope, $cookies, $filter, $http, $window, $stateParams,  basetasksService, schemetasksService, UserService) {
    $scope.taskId = $cookies['edit_taskId'];
    $scope.versionid = $cookies['edit_versionId'];
    $scope.version = $scope.versionid;
    var userid = $rootScope.user.userid;
    $scope.schemetask = [];
    $scope.basetask = [];
    $scope.result = [];

    $scope.$on('versionidChange', function (event, versionid) {
        $scope.versionid = versionid; //监听到$scope.versionid值                                                  的变化。然后调用 $scope.schemeTask                                                ()和$scope.getUsers()这两个                                                方法          
        $scope.schemeTask();
        $scope.getUsers();
    });


    $scope.schemeTask = function () {
        $scope.tasks = [];
        $scope.schemetask = [];
        schemetasksService.get({version: $scope.versionid}, function (res) {
            $scope.schemetask_collection = res.results;
            //console.log($scope.schemetask_collection);
            $scope.schemetask_displayed = [].concat($scope.schemetask_collection);
            var i = 1;
            angular.forEach($scope.schemetask_collection, function (item) {
                item['director'] = "app.writetestitem" + "({taskid:" + item.id + "})";
                item['number'] = i;
                i++;
                $scope.schemetask.push(item);
            });
            $scope.tasks = $scope.schemetask;

        });

    };

    $scope.getUsers = function () {
        UserService.get(function (res) {
            $scope.users = res.results;
            $scope.usersDisplayed = [].concat($scope.users);
            $scope.itemArray = [];
            $scope.userArray = [];
            $scope.names = [];
            angular.forEach($scope.users, function (item) {
                $scope.itemArray.push(item);
                $scope.userArray.push(item.name + item.number);
                var itemname = {'name': item.name, 'number': item.number};
                $scope.names.push(itemname);
            });
            $scope.selected = $scope.users;

        });
    };
});

关于Angularjs控制器之间通信方式,暂且总结到此,欢迎大家批评指正交流!

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Web魔法师

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值