Comment créer une nouvelle étendue isolée avec un objet existant?

Question

Je veux créer un nouveau champ d'application avec cet objet:

$scope.model = { 
    itemA: "First item", 
    itemB: "Second item" 
}; 

// I know, this is wrong, but I want to show you, what I would like to do. 
var newScope = $scope.$new($scope.model); 

Le nouveau champ d'application que je veux accéder à la ngTransclude-partie de ma directive:

link: function (scope, element, attrs, ctrl, transclude) { 

      transclude(scope.model, function (clone, scope) { 
       element.find('section').html("").append(clone); 
      }); 

Et dans le modèle:

<p>{{itemA}} - {{itemB}} 

Mais ce travail Indifférent

Je l'id A partir de: http://angular-tips.com/blog/2014/03/transclusion-and-scopes/ mais je ne veux pas travailler dans le champ d'application de la directive, mais dans un nouveau cadre.

Answer 1

est ma solution que j'ai trouvé à un problem similaire. Un peu long mais ça marche!

Créez une nouvelle directive de classe "vide" avec sa propre portée.

Ajoutez cette directive en tant qu'attribut de classe à votre élément DOM. Il prend automatiquement la portée de la nouvelle directive.

Dans votre cas, vous l'utiliseriez sur votre tag p. Vous pouvez ensuite sélectionner cet élément dans votre fonction de lien et d'appeler la portée() sur elle:

1. <p id="ID" class="my-empty-directive">{{itemA}} - {{itemB}} 

2. create your new directive: 

    angular.module('sgComponents').directive('panelData', [function() { 
     return { 
     restrict: 'C', // a class Directive 
     scope: true // with its own scope 
     }; 
    }]); 

2. link: function (scope, element, attrs, ctrl, transclude) { 

     var pTag = jQuery('#ID');  
     var angularElement = angular.element(pTag); 
     var newScope = angularElement.scope(); // THIS WILL BE THE NEW EMPTY DIRECTIVE'S SCOPE 

Answer 2

AFAIK lorsque vous créez directive habituellement il hérite du champ d'application. L'idée est de créer une portée isolée et cela se fait en faisant.

.directive('directiveName', function ($compile) { 
    return { 
     restrict: "AE", 
     scope:{ 
     yourModelName:"="; 
     } 
     link: function (scope, element) { 
     var el = angular.element('<div>Here you put your template scope.yourModelName</div>'); 
     $compile(el)(scope); 
     element.append(el); 
     } 
    }; 
    }) 

seront copiés de la portée supérieure, mais vous pouvez le modifier dans la directive sans le modifier dans le champ d'application portée supérieure