2015-06-26 32 views
7

Poniżej jest mój html szablonu:wartości przechodząc od dyrektywy do kontrolera

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

Poniżej jest mój kod:

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> 

Dlaczego otrzymuję "niezdefiniowany" zamiast "niektóre wiadomości "

Poniżej jest skrzypce http://jsfiddle.net/j2K7N/27/

Odpowiedz

10

Twój kod jest prawie poprawne, jednak trzeba było kilka kwestii tutaj:

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

Tutaj można przejść z funkcji ctrlFn() od kontrolera, która przyjmuje jedną nieokreśloną argumentu msg, który powoduje, że komunikat alertu z „nieokreślonej” tekstu. Proponuję, aby zmodyfikować kod HTML do tego:

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

Zauważ, że mijam ctrlFn jako zmienną, nie działać.

W kodzie dyrektywy zmieniłem powiązanie zakresu na =, aby upewnić się, że ctrlFn wskaże Twoją funkcję kontrolera. Powoduje to również dwukierunkowe powiązanie zakresu dyrektywy z zakresem kontrolnym (rodzicielskim). Następnie cały kod JS dyrektywy będzie wyglądać następująco:

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); 
     } 
    } 
}); 

Wystarczy zastępując & do =. Widelec roboczy: http://jsfiddle.net/L8masomq/

2

jej trochę dziwactwo ... czytaj więcej o to here

co trzeba zrobić, to - zmiana poniżej

scope.fromDirectiveFn(scope.hello); 

do

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

nazwy zmiennych powinny być to samo dla osoby dzwoniącej &, numer telefonu

Powiązane problemy