Un modèle est compilé dans la directive, et la portée de ng-repeat a des données d'élément , mais les doubles accolades ne peuvent pas accéder , et la portée de ng-repeat Le $ les parents sont tous des portées directives, mais l'interpolation des accolades a échoué. Je ne connais pas la raison. Voici la solution. Le code est le suivant
.<!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>
Il semble que les accolades
Ma compréhension detpl
dans{{}}
aient été supprimées parangular
pour une raison inconnue ! ! Comme c'est étrange ! !est que s'il est traité comme
@
, si la chaîne contient{{}}
, alors c'est lui-même une expression, doncangular
sera dans lecontroller
du$scope
Look actuel pour les variablesitem.value
etitem.val
et remplacez le contenu dans{{}}
Le résultat après le remplacement est ledirective
que vous avez obtenu dansscope.tpl
, donc naturellement il n'y a pas de contenu tel que{{ item.value }}
dedans.Et si vous essayiez une autre manière :