Angularjs - Przekaż argument do dyrektywy

Question

Zastanawiam się, czy istnieje sposób przekazania argumentu do dyrektywy?

Co chcę zrobić, to dołączyć dyrektywę ze sterownika jak ten:

$scope.title = "title"; 
$scope.title2 = "title2"; 

angular.element(document.getElementById('wrapper')).append('<directive_name></directive_name>'); 

to możliwe, aby przekazać argumentu w tym samym czasie, więc zawartość mojego dyrektywy szablonu może być związana z jednym zakresem lub inny?

tutaj jest dyrektywa:

app.directive("directive_name", function(){ 
    return { 
     restrict:'E', 
     transclude:true, 
     template:'<div class="title"><h2>{{title}}</h3></div>', 
     replace:true 
    }; 
}) 

Co jeśli chcę korzystać z tej samej dyrektywy, ale z $ scope.title2?

Answer 1

Oto jak rozwiązać mój problem:

dyrektywę

app.directive("directive_name", function(){ 
    return { 
     restrict: 'E', 
     transclude: true, 
     template: function(elem, attr){ 
      return '<div><h2>{{'+attr.scope+'}}</h2></div>'; 
     }, 
     replace: true 
    }; 
}) 

Controller

$scope.building = function(data){ 
    var chart = angular.element(document.createElement('directive_name')); 
    chart.attr('scope', data); 
    $compile(chart)($scope); 
    angular.element(document.getElementById('wrapper')).append(chart); 
    } 

Mogę teraz używać różnych zakresów tej samej dyrektywy i dołączać je dynamicznie.

Answer 2

Można spróbować jak poniżej:

app.directive("directive_name", function(){ 
return { 
    restrict:'E', 
    transclude:true, 
    template:'<div class="title"><h2>{{title}}</h3></div>', 
    scope:{ 
     accept:"=" 
    }, 
    replace:true 
    }; 
}) 

konfiguruje wiązania pomiędzy wartością „Akceptuję” atrybutu i zakres dominującej dwukierunkowa.

A także można ustawić wiązania dwukierunkowe dane z własności: „=”

Na przykład, jeśli chcesz zarówno klucz i wartość związana z zakresu lokalnej byś zrobił:

scope:{ 
    key:'=', 
    value:'=' 
    }, 

Dla więcej informacji, https://docs.angularjs.org/guide/directive

Tak więc, jeśli chcesz przekazać argument z kontrolera do dyrektywy, a następnie odnieść to poniżej skrzypce

http://jsfiddle.net/jaimem/y85Ft/7/

Nadzieja to pomaga ..

Answer 3

można przekazywać argumenty do dyrektywy niestandardowego, jak to zrobić z wbudowanych skośnych dyrektyw - określając atrybut na Dyrektywie-elementu:

angular.element(document.getElementById('wrapper')) 
     .append('<directive-name title="title2"></directive-name>'); 

Musisz tylko zdefiniować scope (łącznie z argumentem (parametrami)/parametrem (parametrami)) w fabrycznej funkcji dyrektywy. W poniższym przykładzie dyrektywa przyjmuje parametr title. Następnie można użyć, na przykład w template, stosując regularną skośnych sposób: {{title}}

app.directive('directiveName', function(){ 
    return { 
     restrict:'E', 
     scope: { 
     title: '@' 
     }, 
     template:'<div class="title"><h2>{{title}}</h2></div>' 
    }; 
}); 

zależności od sposobu/co chcesz związać, masz różne opcje:

• = jest wiązanie
• @ dwukierunkowy prostu odczytuje wartość (wiążącego w jedną stronę)
• & służy do funkcji powiązać

W niektórych przypadkach możesz użyć nazwy "zewnętrznej", która różni się od nazwy "wewnętrznej". Z zewnętrzną mam na myśli nazwę atrybutu na elemencie dyrektywy, a wewnętrzną mam na myśli nazwę zmiennej, która jest używana w zakresie dyrektywy.

Na przykład, jeśli przyjrzymy się powyższej dyrektywie, możesz nie chcieć określać innego, dodatkowego atrybutu tytułu, nawet jeśli wewnętrznie chcesz pracować z właściwością title. Zamiast chcesz użyć dyrektywy w następujący sposób:

<directive-name="title2"></directive-name> 

Można to osiągnąć przez podanie nazwy za powyższej opcji w definicji zakres:

scope: { 
    title: '@directiveName' 
} 

Należy również pamiętać następujące rzeczy:

• Specyfikacja HTML5 mówi, że niestandardowe atrybuty (w zasadzie to, co jest wszędzie w aplikacjach Angular), należy poprzedzić prefiksem data-. Angular obsługuje to przez usunięcie prefiksu data- z dowolnych atrybutów. Tak więc w powyższym przykładzie możesz określić atrybut na elemencie (data-title="title2") i wewnętrznie wszystko będzie takie samo.
• Atrybuty elementów występują zawsze w postaci <div data-my-attribute="..." />, natomiast w kodzie (np. Właściwości w obiekcie zakresu) mają one postać myAttribute. Straciłem dużo czasu, zanim zdałem sobie z tego sprawę.
• Aby uzyskać inne podejście do wymiany/udostępniania danych między różnymi komponentami kątowymi (kontrolerami, dyrektywami), warto rzucić okiem na usługi lub kontrolery dyrektyw.
• można znaleźć więcej informacji na temat Angular homepage (directives)

Answer 4

<button my-directive="push">Push to Go</button> 

app.directive("myDirective", function() { 
    return { 
     restrict : "A", 
     link: function(scope, elm, attrs) { 
       elm.bind('click', function(event) { 

        alert("You pressed button: " + event.target.getAttribute('my-directive')); 
       }); 
     } 
    }; 
}); 

oto co zrobiłem

Używam dyrektywę jako atrybutu html i zdałem parametr w następujący sposób w moim pliku HTML. my-directive="push" I z dyrektywy pobrałem go z obiektu zdarzenia klikniętego myszką. event.target.getAttribute('my-directive').