2017-08-14 4 views
1

Dans mon scénario, j'ai une directive qui aura une autre étiquette de directive comme paramètre de portée. La première directive doit ensuite générer une nouvelle directive et l'ajouter à l'intérieur. Il doit également ajouter l'attribut dynamique bidirectionnel lié à la directive nouvellement générée.Liaison d'attribut dynamique de directive générée par AngularJS

Je suis capable de générer la nouvelle balise de directive, mais lorsque j'essaie d'ajouter l'attribut de la directive, j'ajoute ceci comme la chaîne (valeur ou chaîne simple). Donc, quand j'essaie d'accéder à l'attribut comme variable de portée dans une nouvelle directive, cela me donne 'indéfini'.

HTML:

<div ng-controller="MainCtrl"> 
=== 
<directive1 tag="obj.tag" request-id="requestId"></directive1> 
</div> 

directive:

app.directive('directive1', function($compile) { 
return { 
    restrict: 'E', 
    scope:{ 
     tag:"=", 
     requestId:"=" 
    }, 
    link: function(scope, element, attrs) { 
     var el; 
     scope.$watch('tag', function (tpl) { 
      console.log("8888",tpl); 
      el = $compile(tpl)(scope); 
      el.attr('request-id', scope.requestId); 
      el = $compile(el)(scope); 
      element.append(el); 
     }); 
     // attrs.$set('ngHide', false); 
     // attrs.$set('hide', null); 
     // $compile(element)(scope); 
    } 
}; 
}) 
app.directive('test', function($compile) { 

    return { 
     restrict: 'E', 
     scope:{ 
      requestId:"=" 
     }, 
     controllerAs: 'requestCtrl', 
     bindToController: true, //required in 1.3+ with controllerAs 

     controller:function(){ 
      var requestCtrl=this; 
      console.log("----->>>> ",requestCtrl.requestId) 
     }, 
     link: function(scope, element, attrs) { 
     } 
    }; 
}); 

Controller:

app.controller('MainCtrl', function($scope) { 
    $scope.obj={}; 
    $scope.obj.tag="<test></test>"; 
    $scope.requestId="123"; 
}); 

Voici le plunker

Répondre

1

Votre plunker utilise angulaire 1.0 .2 qui ne supporte pas encore bindToController, le passage à 1.3 le fera fonctionner comme une liaison de chaîne comme décrit dans votre question.

Pour utiliser requestId en tant que liaison bidirectionnelle, vous devez passer la chaîne requestId dans l'attr.

el.attr('request-id', 'requestId'); 

Working plunker