AngularJS: jak przekazać argumenty / funkcje do dyrektywy?

Spójrz na to Fiddle , co muszę zmienić, aby wyrażenia w szablonie były oceniane za pomocą argumentów zdefiniowanych w HTML? Przycisk Zapisz powinien wywołać blabla() - funkcję kontrolera, ponieważ go przekazuję?

var myApp = angular.module('MyApp',[])
myApp.directive('editkeyvalue', function() {
    return {
        restrict: 'E',
        replace: true,
        scope: {
            accept: "expression"
        },
        template : '<div><label class="control-label">{{key}}</label>' +
        '<label class="control-label">{{key}}</label>' +
          '<input type="text" ng-model="value" />'+
        '<button type="button" x-ng-click="cancel()">CANCEL</button>' +
        '<button type="submit" x-ng-click="save()">SAVE</button></div>',

      controller: function($scope, $element, $attrs, $location) {
        $scope.save= function() {
          $scope.accept();
        };
      }
    }
});
Nie rozumiem tego. Dzięki za pomoc!
Author: Smamatti, 2012-12-05
Source

3 answers

Możesz ustawić dwukierunkowe powiązanie danych za pomocą property: '=', Jak sugeruje Roy. Więc jeśli chcesz, aby zarówno key, jak i value były powiązane z lokalnym zakresem, wykonaj 

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

Ponieważ przekazujesz te wartości, masz do nich dostęp w kontrolerze Twojej dyrektywy. Ale w przypadku, gdy chcesz uruchomić funkcję w kontekście nadrzędnego zakresu, który wydaje się być tym, co chcesz zrobić z atrybutem accept, musisz powiedzieć angular w ten sposób 

scope: {
    accept: "&"
}

Teraz, z Twojej save metody można wywołanie funkcji przekazanej przez accept 

controller: function($scope, $element, $attrs, $location) {
    $scope.save= function() {      
        $scope.accept()
    };
}

Oto jsfiddle

 46
Author: jaime,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-12-05 16:16:00 
scope: {
    accept: "&"
}

Używaj małych liter w nazwach funkcji, w przeciwnym razie to nie zadziała.

 15
Author: ,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-09-15 07:50:21

Tylko krótka Uwaga, że nie potrzebujesz funkcji owijania Zapisz. Wystarczy wywołać to w szablonie:

'<button type="submit" x-ng-click="accept()">SAVE</button></div>',

Która transponuje wywołanie funkcji i przekazuje parametry zgodnie z oczekiwaniami.

Upraszcza to kod i sprawia, że jest on dużo łatwiejszy do odczytania.

 1
Author: Gary Blake,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-03-30 17:54:10