oninit - templateurl angularjs




AngularJS: impossibile eseguire l'interpolazione dell'attributo dalla prima direttiva a una seconda.(w/plunker esempio) (4)

Beh, se si desidera passare i dati dalla prima direttiva al secondo modello di direttiva, è possibile aggiungere l'attributo dynamics nel primo controller di direttiva utilizzando
this.fromFirstDir = "puoi passare da qui"

primo controllore direttivo:

controller: ['$scope','$attrs',function($scope,$attrs){
      console.log('controller');
      $scope.one = 'foo';

      this.fromFirstDir = "you can pass from here"
    }],
  }

Quindi, utilizzando l'attributo require nella seconda direttiva per il primo controller di direttiva, è possibile accedere a questo attributo dinamico dalla funzione di collegamento della seconda direttiva Diretta utilizzando il controller passato alla funzione di collegamento. Infine, assegna questi attributi all'ambito locale passato alla funzione di collegamento.

app.directive('secondDirective',function(){
  return { 
    scope: {twoData : '@twoData'},
    require : '^firstDirective',
    template: function (element,attributes){
      console.log(attributes.two) //{{one}} not 'foo' or 'test'
      return 'Hello <b>{{fromFirstDir}}</b>'
    },
    link : function(scope,element,attr,firstDirCtrl){
      console.log("===",firstDirCtrl.fromFirstDir) 
      scope.fromFirstDir = firstDirCtrl.fromFirstDir;
    }
  }
});

In questo modo, questi attributi dinamici sono disponibili per la tua seconda direttiva.

Ecco l'ultimo violino .

Spero che questo ti possa aiutare.

Riferimento

Riferimento plunker: http://plnkr.co/edit/otv5mVVQ36iPi3Mp0FYw?p=preview

Spiegazione del problema

Supponiamo di avere due direttive, la first-directive e la second-directive . Ora supponiamo di avere accesso solo alla first-directive che speriamo di avvolgere con la second-directive e passare ad essa i nostri attributi manipolati.

app.directive('firstDirective', function() {
  return {
    scope: true,
    priority: 1000,
    transclude: true,

    template: function(element,attributes){
      console.log('template')
      return '<second-directive two="{{one}}"></second-directive>'
    },

    compile: function(element,attributes) {
      console.log('compile')
      return {
        pre: function(scope){
          scope.one = 'foo'
            console.log('cpre')
        },
        post: function(scope){
          scope.one = 'foo'
            console.log('cpost')
        },
      }
    },

    controller: ['$scope','$attrs',function($scope,$attrs){
      console.log('controller');
      $scope.one = 'foo';
    }],
  }
})

app.directive('secondDirective',function(){
  return {
    template: function (element,attributes){
      console.log(attributes.two) //{{one}} not 'foo' or 'test'
      return 'Hello {{two}}'
    }
  }
});    

first-directive viene chiamata come segue:

<first-directive one='test'></first-directive>

l'output di console.log come segue:

template
compile
{{one}}
controller
cpre
cpost

Quindi da questo ho imparato che il template viene chiamato prima della compilazione. Questo è un aspetto peculiare dei miei occhi da principiante perché non c'è comunque modo di manipolare il valore restituito dalla funzione template tramite il link compilazione, controller, pre o post!

La domanda è questa:

Come posso chiamare la second-directive con il valore dell'attributo dinamico che voglio? Tieni presente che la second-directive è completamente indipendente e non è possibile aggiungere codice lì.

PS - Una possibile idea che ho è di chiamare la seconda direttiva come segue:

template: function(element,attributes){
  console.log('template')
  var explicit = ???? /* how to access scope? */
  return '<second-directive two="'+ explicit +'"></second-directive>'
},

o in alternativa

template: function(element,attributes){
  console.log('template')
  return $interpolate('<second-directive two="{{one}}"></second-directive>')(scopeObj) /* how does one access scopeObj with current scope values here? */
},

Tuttavia, ancora una volta, non sono sicuro di come ottenere il valore passato alla prima direttiva prima che vengano richiamate le altre funzioni. Il controller ha accesso a $ scope e viene chiamato AFTER template.

I tuoi suggerimenti sono molto apprezzati.


Hai scritto la seconda direttiva?

<second-directive two="'+ explicit +'"></second-directive>

Affinché il codice sopra riportato funzioni, è necessario disporre di un'impostazione dell'oggetto con ambito isolato nella seconda direttiva, controllare il plunkr di seguito.

http://plnkr.co/edit/YP2h3MOhsrjN5sLUNQs6?p=preview


Sto usando la tua domanda per imparare, ma sono riuscito a trovare questo, che potrebbe funzionare per te:

app.directive("tryThis", function($compile){
    return{
        scope: {
          one: '@',
        },
        link: function(scope, element){
            var template = '<second-directive two="'+scope.one+'"></second-directive>';
            var linkFn = $compile(template);
            var content = linkFn(scope);
            element.append(content);
        }
    }
});

Plunkr è qui , nota che il test è ora registrato nella console invece di {{one}} . Se a SecondDirective viene assegnato un ambito isolato, il test verrà quindi visualizzato sullo schermo.

Questo collegamento mi ha anche aiutato a capire concettualmente il problema che stai affrontando, dando un po 'di contesto al problema del passaggio "senza portata durante la compilazione" - non sono sicuro che ci sia un modo per aggirare questo problema.


Hai transclude: true ma non lo stai utilizzando nel modello. Non puoi semplicemente usare questo markup e avere il template per la prima direttiva usare <ng-transclude> ? Hai scope: true modo che tu possa semplicemente manipolare la proprietà dal genitore / controller e le modifiche verrebbero applicate a entrambe le direttive.

markup

<first-directive one="test">
    <second-directive two="test"></second-directive>        
</first-directive>

modello per la prima direttiva

template: `<div>
               my first directive content
               <ng-transclude></ng-transclude>
           </div>`;

https://docs.angularjs.org/api/ng/directive/ngTransclude







angularjs-compile