在指令中编译了一个模版,其中的ng-repeat的作用域里有item数据,但是双花括号不能取到,ng-repeat的作用域的$parent都是directive的scope,但花括号插值失败,不明其中的原因,求解,代码如下
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="//cdn.bootcss.com/angular.js/1.3.13/angular.js"></script>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body ng-app='app' ng-controller='app'>
<compile-scope tpl="
<span>我是bind---</span><p ng-bind='data.somevalue'></p>
<span>我是括号---</span><p>{{data.somevalue}}</p>
<ul ng-repeat='item in data.list' ng-click='checkscope(this)'>
<li><span>我是bind---</span><span ng-bind='item.value'></span>,<span ng-bind='item.val'></span></li>
<li><span>我是括号---</span>{{item.value}},{{item.val}}</li>
</ul>
" twowaybinding="{data:data,checkscope:checkscope}"></compile-scope>
</body>
</html>
<script>
angular.module('app',[])
.controller('app',function($scope){
console.log('i am scope from ctrler',$scope);
$scope.checkscope = function(scope){
console.log(scope)
}
$scope.data = {
somevalue : 'somevalue',
list:{
a:{value:'i am value1 from list',val:'i am val1 from list'},
b:{value:'i am value2 from list',val:'i am val2 from list'},
}
}
})
.directive('compileScope',function($timeout, $compile){
return{
restrict:'E',
scope:{
tpl:'@',
twowaybinding:'='
},
template:'',
link:function(scope, ele, attr){
angular.forEach(scope.twowaybinding, function(value, key){
scope[key] = value;
$timeout(function(){
scope.$watch(function(){
return scope[key];
},function(){
scope.$parent[key] = scope[key]
},true)
scope.$parent.$watch(function(){
return scope.$parent[key];
},function(v){
scope[key] = scope.$parent[key];
},true)
})
});
$timeout(function(){
var cpl = $compile(scope.tpl)(scope);
ele.html('');
ele.append(cpl)
})
}
}
})
</script>
Looks like it was deleted because
tpl
里的花括号{{}}
不知道因为什么原因被angular
! ! it's wired! !My understanding is that if as
@
处理,那里面的字符串里如果包含了{{}}
,那这本身就是个表达式,所以angular
会在当前controller
的$scope
里寻找item.value
和item.val
变量并替换{{}}
里的内容,替换后的结果,才是你在directive
里取到的scope.tpl
,那这里面自然已经没有{{ item.value }}
etc.How about you try another way: