angular.js - 动态编译中ng-repeat中双花括号不能取到指的原理？

在指令中编译了一个模版，其中的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>

仅有的幸福2744 hari yang lalu615

<!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>

angular.js - 动态编译中ng-repeat中双花括号不能取到指的原理？

membalas semua(1)saya akan balas