- Gemeinschaft
- Lernen
- Tools-Bibliothek
- Freizeit
Heim > Fragen und Antworten > Hauptteil
在指令中编译了一个模版，其中的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>
滿天的星座2017-05-15 16:55:41
看起来是因为tpl里的花括号{{}}不知道因为什么原因被angular删掉了！！好奇怪！！
我的理解是，如果作为@处理，那里面的字符串里如果包含了{{}}，那这本身就是个表达式，所以angular会在当前controller的$scope里寻找item.value和item.val变量并替换{{}}里的内容，替换后的结果，才是你在directive里取到的scope.tpl，那这里面自然已经没有{{ item.value }}等内容了
要不你换个方式吧：
<!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(){
console.log(scope.tpl);
var cpl = $compile(scope.tpl)(scope);
ele.html('');
ele.append(cpl)
})
}
}
})
</script>