angular.js - 动态编译中ng-repeat中双花括号不能取到指的原理?
仅有的幸福
仅有的幸福 2017-05-15 16:53:41
0
1
614

在指令中编译了一个模版,其中的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>
仅有的幸福
仅有的幸福

reply all(1)
滿天的星座

Looks like it was deleted because tpl里的花括号{{}}不知道因为什么原因被angular! ! it's wired! !

My understanding is that if as @处理,那里面的字符串里如果包含了{{}},那这本身就是个表达式,所以angular会在当前controller$scope里寻找item.valueitem.val变量并替换{{}}里的内容,替换后的结果,才是你在directive里取到的scope.tpl,那这里面自然已经没有{{ item.value }}etc.

How about you try another way:

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



Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template