angularjs使用include后双向绑定失败的解决

haoningabc

浏览: 1477893 次
性别:
来自: 北京

最近访客更多访客>>

zfyq124

bartontang

dlzdy

cnnlush0605

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript
angularjs

angularjs JavaScript

<!DOCTYPE html>
<html ng-app="myapp">
<head>
    <meta charset="utf-8">
    <title>ng-model directive</title>
</head>
<body ng-controller="HelloController">
<script src="angular.min.js"></script>
<script>
	var app=angular.module("myapp",[]);
    app.controller("HelloController",function($rootScope,$scope) {
    	$scope.greeting="haoning";
    
        $scope.consoleng = function() {
            console.log($scope.greeting) ;
        }
        
    });
</script>

<div>
    <p>bbbbbbbbb</p>
    <input id="thism" ng-model="greeting" >
    <p>Hello {{greeting || "World"}}</p>
    <button ng-click="consoleng()" >dayin</button>
    <button ng-click="cha()">cha</button>
    <hr>
</div>
</body>
</html>

$scope.greeting与ng-model="greeting"
绑定，党model变了，打印的scope的greeting也变了

然而如果引入了ng-include 的子页面
在子页面改了model之后，scope中的数据没有如期改变

需要处罚apply方法使数据改变，apply又存在安全问题，
解决办法如下

外层的为
out.html

<!DOCTYPE html>
<html ng-app="myapp">
<head>

    <meta charset="utf-8">
    <title>ng-model directive</title>
</head>
<body ng-controller="HelloController">

 
<script src="angular.min.js"></script>
<script>
	var app=angular.module("myapp",[]);
    app.controller("HelloController",function($rootScope,$scope) {
    	$scope.safeApply = function(fn) {
		    var phase = this.$root.$$phase;
		    if (phase == '$apply' || phase == '$digest') {
		        if (fn && (typeof(fn) === 'function')) {
		            fn();
		        }
		    } else {
		        this.$apply(fn);
		    }
		};
    	$scope.greeting="haoning";
    
        $scope.consoleng = function() {
            console.log($scope.greeting) ;
        }
        $rootScope.cha = function() {
        	console.log("cha");
           	$scope.safeApply(function () {  
           		$scope.greeting = document.getElementById("thism").value;  
        	});
        }
    });
</script>

<div ng-include="'inner.html'" 
            class="sidebar sidebar-right"></div>
</body>
</html>

内层的为
inner.html

<div>
    <p>bbbbbbbbb</p>
    <input id="thism" ng-model="greeting" >
    <p>Hello {{greeting || "World"}}</p>
    <button ng-click="consoleng()" >dayin</button>
    <button ng-click="cha()">cha</button>
    <hr>
</div>

使model的值改变后，手动触发一下apple那个方法，
才能改变scope中的值
分析，
加了

	$scope.safeApply = function(fn) {
		    var phase = this.$root.$$phase;
		    if (phase == '$apply' || phase == '$digest') {
		        if (fn && (typeof(fn) === 'function')) {
		            fn();
		        }
		    } else {
		        this.$apply(fn);
		    }
		};

和

$rootScope.cha = function() {
        	console.log("cha");
           	$scope.safeApply(function () {  
           		$scope.greeting = document.getElementById("thism").value;  
        	});
        }

分享到：

websocket传传图片 | 编译linux2.6.24

2015-12-20 19:41
浏览 1869
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

angularjs使用include后双向绑定失败的解决

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

angularjs使用include后双向绑定失败的解决

评论

发表评论

相关推荐

indexedDB存图片减少请求

vizceral-example的例子

jsonpath的helloworld

流动图神器vizceral

emscripten asm.js的helloworld

websocket上传文件

webpack的helloworld

iphone6等移动端的css自适应

javascript自定义事件

html5的fiesystem api 浏览器本地存储

angular指令菜单的例子

websocket传传图片

html5 陀螺仪

webgl的贝塞尔曲线

chrome app的helloworld

shader and Program编程基本概念 - 转

javascript对象转json

jquery 的svg中国地图

纯css的树型结构

D3 的3d图

最近访客更多访客>>