kendo mobile angularjs 不同页面之间进行通信

最新推荐文章于 2020-06-06 11:42:57 发布

luoshuizhongdehua

最新推荐文章于 2020-06-06 11:42:57 发布

阅读量532

点赞数

分类专栏： angularjs 跨平台开发文章标签： angularjs mobile 通信 mvvm

本文链接：https://blog.csdn.net/luoshuizhongdehua/article/details/46374895

版权

跨平台开发同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

angularjs

1 篇文章 0 订阅

订阅专栏

angularjs 是一个非常好的mvvm 前端框架,根据上个项目kendo mobile app 的开发，发现在实现跨品台开发中，各种业务逻辑，样式布局，需要很多js 代码操作实现，但是与angularjs 结合，提别是过滤器，ng-class ,控制器间的通信等，可以用较少部分js 来实现以前业务功能。

在这篇文章中，主要将各种不同页面中的通信；

在此之前，对所用到的一些名词进行一些别要的说明；

angularjs 在 scope 中为我们提供了冒泡和隧道机制，$broadcast:把时间广播给所有的controller,$emit:把事件冒泡传递给父controller,$on :事件注册函数，有了这一些我们就能在angularjs controller之间进行通信

实现一代：

   <body ng-app="myApp" ng-controller="parentCtr">
        <div id="main" data-role="view" data-init="mobileListViewEndlessScrolling" data-role="touch" id="tabstrip-profile"   data-title="" data-layout="mobile-tabstrip">
           <a href="#twoview">go to view</a>
           <div ng-controller="childCtr1">
               <input ng-model="name" type="text"ng-change="change(name)"></input>

<span style="white-space:pre">	</span>   <span style="white-space:pre">	</span><div data-role="button" ng-click="clik($event.target)"></div>
           </div>
        </div> 
        <div data-role="view" id="twoview" ng-controller='childCtr2'>
               Ctr1 name:
               <input type="text" ng-model="ctrName"/>
        </div>
        <div data-role="layout" id="layout_main"data-role="touch" data-id="mobile-tabstrip">
            <header data-role="header">
                <div data-role="navbar" style="padding:10px;">
                    <!--<a class="nav-button" data-align="left" data-role="backbutton">Back</a>
                     -->
                    <span data="1111" data-role="view-title">通讯录</span>
                </div>
            </header>
            
            
        </div>
   </body>

js 代码：

var myApp = angular.module("myApp", []).controller("parentCtr",function($scope){
	$scope.$on("ctrNameChange",function(event,msg){
		$scope.$broadcast("ctrNameChangeFromParent",msg);
	});

<span style="white-space:pre">	</span>$scope.click=function(target){

<span style="white-space:pre">	</span>var id=target.parent().getAttribute(data);

<span style="white-space:pre">	</span>console.log(id);

}
});

myApp.controller('childCtr1', function($scope) {
 	$scope.change=function (name) {
 		$scope.$emit('ctrNameChange',name);
 	}
  });
myApp.controller('childCtr2',function($scope){
	$scope.$on("ctrNameChangeFromParent",function(event,msg){
		$scope.ctrName=msg;
	});
});

kendo mobile 单页面布局，所有的页面为兄弟关系，在第一个页面中，注册input ng-change 时间，当事件发生改变时，向父亲controller 发射 ctrNameChange事件,并且传递参数name，在parent controller中，注册该ctrNameChange事件并且接受该参数,并且，并且向children controller 广播 ctrNameChangeFromParent事件且传递name参数，在第二个页面中，注册了该ctrNameChangeFromParent控制事件，并且获取参数并且复制ctrName;

效果

当跳转到第二个页面是：

以上为angularjs 不同控制器之间的数据通信；