2015-06-26 16 views
7

Qui di seguito è il mio modello HTML:valori passando dalla direttiva per controller

<div ng-app="dr" ng-controller="testCtrl"> 
    <test color1="color1" data-method="ctrlFn(msg)"></test>  
</div> 

Qui di seguito è il mio codice:

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

app.controller("testCtrl", function($scope) { 
    $scope.ctrlFn = function(arg) {   
     alert(arg); 
    } 

}); 
app.directive('test', function() { 
    return { 
     restrict: 'E', 
     scope: { 
      fromDirectiveFn: '&method' 
     }, 
     link: function(scope, elm, attrs) { 
      //Way One 
      scope.hello = "some message"; 
      scope.fromDirectiveFn(scope.hello); 
     } 
    } 
}); 

<div ng-app="dr" ng-controller="testCtrl"> 
    <test color1="color1" data-method="ctrlFn(msg)"></test>  
</div> 

Perché mi appare "indefinito" invece di "qualche messaggio "

Di seguito è un violino http://jsfiddle.net/j2K7N/27/

risposta

10

Il tuo codice è quasi corretta, però hai avuto diversi problemi qui:

<test color1="color1" data-method="ctrlFn(msg)"></test> 

Qui si passa la funzione ctrlFn() dal controller, che prende un argomento indefinita msg, che causa il messaggio di avviso con il testo "non definito". Suggerisco di modificare il codice HTML a questo:

<test color1="color1" data-method="ctrlFn"></test> 

Nota che passo il ctrlFn come una variabile, non funziona.

Nel codice della direttiva, ho modificato il binding dell'ambito su = per assicurarmi che lo ctrlFn punti alla funzione del controller. Questo imposta anche un legame bidirezionale tra l'ambito della direttiva e l'ambito del controllore (genitore). Poi tutto il codice JS della direttiva sarà simile a questa:

app.directive('test', function() { 
    return { 
     restrict: 'E', 
     scope: { 
      fromDirectiveFn: '=method' 
     }, 
     link: function(scope, elm, attrs) { 
      //Way One 
      scope.hello = "some message"; 
      scope.fromDirectiveFn(scope.hello); 
     } 
    } 
}); 

Proprio la sostituzione del &-=. Forchetta di lavoro: http://jsfiddle.net/L8masomq/

2

la sua parte di un capriccio ... Per saperne di più su di esso here

ciò che devi fare è - il cambiamento di sotto

scope.fromDirectiveFn(scope.hello); 

a

scope.fromDirectiveFn({'msg' : scope.hello}); 

i nomi delle variabili devono essere lo stesso nel chiamante & callee

Problemi correlati