web-dev-qa-db-fra.com

angularjs passe le tableau nouvellement créé dans l'attribut à la directive

J'ai créé ce violon pour montrer mon problème ...

http://jsfiddle.net/dQDtw/

Je passe un tableau nouvellement créé à une directive et tout se passe bien. Cependant, je reçois une erreur dans la fenêtre de la console indiquant: 

Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!

Des idées sur ce que je dois masser pour nettoyer cela? J'aimerais pouvoir réutiliser la directive sans avoir à mettre à jour le contrôleur.

Voici le html

<body ng-app="myApp">
    <test-dir fam-people='[1,4,6]'> </test-dir>
    <test-dir fam-people='[2,1,0]'> </test-dir>
</body>

Voici le JS.

var myApp = angular.module ('myApp', []);

myApp.directive('testDir', function() {
            return { restrict: 'E'
                   , scope: { famPeople: '=famPeople' }
                   , template: "<ol> <li ng-repeat='p in famPeople'> {{p}}"
                   };
    });
angularjsangularjs-directive
11
Rob G

Cette erreur est due au fait que votre directive n'est pas capable d'interpréter le tableau comme un tableau. Essayez ceci:

<body ng-app="myApp" ng-controller="ctrl1">
    <test-dir fam-people='people'> </test-dir>

</body>



var myApp = angular.module('myApp', []);

myApp.directive('testDir', function() {
                return { restrict: 'E'
                       , scope: { famPeople: '=' }
                       , template: "<ol> <li ng-repeat='p in famPeople'> {{p}}"
                       };
        });

Contrôleur et directive: 

myApp.controller("ctrl1",function($scope){
$scope.people=[1,4,6];
});

MODIFIER

ou vous pouvez le transmettre en tant qu'attribut et l'analyser dans un tableau:

<body ng-app="myApp" >
    <test-dir fam-people='[1,4,6]'> </test-dir>

</body>

Directif:

var myApp = angular.module('myApp', []);

myApp.directive('testDir', function() {
                return { restrict: 'E', 
                        //scope: { famPeople: '=' },
                       template: "<ol> <li ng-repeat='p in people track by $index'> {{p}}",
                        link:function(scope, element, attrs){
                      scope.people=JSON.parse(attrs.famPeople);
                        }
                       };
        });

Voir violon .

13
Mohammad Sepahvand

L'analyse JSON ne fonctionne pas aussi efficacement lorsque le tableau contient une chaîne.

Par exemple:

<file-handler fh-services="['BOX','DROPBOX']"></file-handler>

Dans la directive, vous pouvez utiliser scope.$eval pour convertir ce qui apparaît dans l'attribut en un tableau.

scope.$eval(attrs.fhServices)
14
Filype

qu'en est-il de:

<body ng-app="myApp">
    <test-dir fam-people='1;4;6'> </test-dir>
    <test-dir fam-people='2;1;0'> </test-dir>
</body>

et

    var myApp = angular.module('myApp', []);

    myApp.directive('testDir', function() {
                return { restrict: 'E', 
                        //scope: { famPeople: '=' },
                       template: "<ol> <li ng-repeat='p in people track by $index'> {{p}}",
                        link:function(scope, element, attrs){
                      scope.people= attrs.famPeople.split(';');
                        }
                       };
        });

solution la plus propre?

0
Luca Trazzi