AngularJS: Как передать аргументы/функции директиве?

Посмотрите эту скрипту, что мне нужно изменить, чтобы выражения в шаблоне оценивались с использованием аргументов, определенных в HTML? Кнопка SAVE должна вызывать blabla() -функцию контроллера, так как я передаю его?

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

Я действительно не вижу этого. Спасибо за помощь!

Ответ 1

Вы можете установить двустороннюю привязку данных с помощью property: '=', как предлагает Рой. Поэтому, если вы хотите, чтобы как key, так и value привязаны к локальной области, вы могли бы сделать

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

Поскольку вы передаете эти значения, у вас есть доступ к ним в вашем директивном контроллере. Но в случае, если вы хотите запустить функцию в контексте родительской области, которая, похоже, является тем, что вы хотите сделать с атрибутом accept, тогда вам нужно будет указать angular, как это

scope: {
    accept: "&"
}

Теперь, из вашего метода save вы можете вызвать функцию, переданную через accept

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

Здесь jsfiddle

Ответ 2

scope: {
    accept: "&"
}

Используйте строчные буквы для имен функций, иначе это не сработает.

Ответ 3

Просто помните, что вам не нужна функция обертывания. Просто позвоните в шаблон:

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

Это переносит вызов функции и передает параметры, как ожидалось.

Это упрощает код и упрощает его чтение.