angulaire.js - Pourquoi les doubles accolades dans ng-repeat ne peuvent-elles pas être récupérées lors d'une compilation dynamique ?
仅有的幸福
仅有的幸福 2017-05-15 16:53:41
0
1
635

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>
仅有的幸福
仅有的幸福

répondre à tous(1)
滿天的星座

Il semble que les accolades tpl dans {{}} aient été supprimées par angular pour une raison inconnue ! ! Comme c'est étrange ! !

Ma compréhension de

est que s'il est traité comme @, si la chaîne contient {{}}, alors c'est lui-même une expression, donc angular sera dans le controller du $scope Look actuel pour les variables item.value et item.val et remplacez le contenu dans {{}} Le résultat après le remplacement est le directive que vous avez obtenu dans scope.tpl, donc naturellement il n'y a pas de contenu tel que {{ item.value }} dedans.

Et si vous essayiez une autre manière :

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



Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal