Как передать параметр в контроллер из директивы?

Question

Мой HTML выглядит следующим образом

<td currency-convert idrVal="{{(btcAsk.btcValue * btcAsk.btcAmnt).toFixed(2)}}"></td> 

The AngularJS код

Контроллер имеет метод:

$scope.convertIDRtoUSD = function(idrValue) { 

    return CurrencyConversions.convertToUSD(idrValue, 'IDR'); 
}; 

И директива выглядит ..

bitcoinApp.directive("currencyConvert", function() { 
return { 
    restrict: 'A', 
    scope: { 
     idrval: '@' 
    }, 
    template: '<span class="has-tip" tooltip="convertIDRtoUSD({{idrval}})" tooltip-animation="false">{{idrval}}</span>' 
}; 
}); 

Это без вызова метода convertIDRtoUSD.

Чтение в Интернете, я думаю, что я должен использовать изоляционную область «&», но пока не добился успеха.

Answer 1

Хорошо, я постараюсь сказать это как можно лучше, так что голый со мной! Шаблон содержит метод. Во время выполнения он ожидает, что этот метод будет присутствовать в текущей области. Однако в этот момент область действия - это изолированная область действия, созданная с помощью директивы, и просто содержит значение idrval, поэтому метод не определен.

Вы должны либо добавить функцию convertIDRtoUSD() в рамках директивы, или передать функцию в вашей директивы вместе с idrval. Если вы выберете первый, you'r директива может выглядеть следующим образом:

bitcoinApp.directive("currencyConvert", function() { 
return { 
    restrict: 'A', 
    scope: { 
     idrval: '@' 
    }, 
    template: '<span class="has-tip" tooltip="convertIDRtoUSD({{idrval}})" tooltip-animation="false">{{idrval}}</span>', 
    link: function(scope) { 
     scope.convertIDRtoUSD = function(idrValue) { 
      return CurrencyConversions.convertToUSD(idrValue, 'IDR'); 
     }; 
    } 
}; 
}); 

Если вы хотите передать эту функцию в, а функция существует на контроллере, ваш HTML будет выглядеть примерно так:

<td currency-convert my-func="convertIDRtoUSD(val)" idrVal="{{(btcAsk.btcValue * btcAsk.btcAmnt).toFixed(2)}}"></td> 

и ваша директива:

bitcoinApp.directive("currencyConvert", function() { 
return { 
    restrict: 'A', 
    scope: { 
     idrval: '@', 
     myFunc: '&' 
    }, 
    template: '<span class="has-tip" tooltip="myFunc({val: idrval})" tooltip-animation="false">{{idrval}}</span>' 
}; 
}); 

Некоторые вещи, чтобы отметить - имя атрибута функции должно быть «тир названия» не верблюд случай с именем и параметры функции, передаваемыми в директива должна быть передана объект с именованными значениями. Надеюсь, это поможет!