AngularJS - включить переменную в обратный вызов

0

У меня есть угловая директива, позволяющая передавать обратный вызов следующим образом:

angular
    .module('app')
    .directive('myDirective', myDirective);

function myDirective() {
    return {
        bindToController: {
            buttonClick: '&'
        },
        controller: 'MyController',
        controllerAs: 'vm',
        restrict: 'E',
        scope: {},
        templateUrl: '<div><button data-ng-click="vm.buttonClick(\'hello\')">Click me</button>'
    };
}

Затем в моем родительском HTML, я

<my-directive button-click="ctrl.myCallback()"></my-directive>

Затем, наконец, в моем родительском контроллере, у меня есть

function myCallback(msg) {
    alert('message is: ' + msg);
}

Цель состоит в том, чтобы отобразить "привет" или любые данные, переданные на обратный вызов, однако это не работает.

Я делаю что-то неправильно? Он работает, если не указаны аргументы

благодаря

FYI здесь ссылка на Plunker (http://plnkr.co/edit/F6TafMWD3EWqVCCLaMys?p=preview)

  • 0
    Можете ли вы показать код MyController ?
Теги:

2 ответа

2
Лучший ответ

При использовании & вам нужно вызвать функцию с 1 аргументом, который представляет собой карту аргументов, которые вы хотите передать.

<my-directive button-click="ctrl.myCallback(msg})"></my-directive>

return {
    //...
    template: '<div><button data-ng-click="vm.buttonClick({msg: \'hello\'})">Click me</button>'
}

Если ваша функция заняла 2 аргумента, вы бы:

<my-directive button-click="ctrl.myCallback(msg1, msg2})"></my-directive>

return {
    //...
    template: '<div><button data-ng-click="vm.buttonClick({msg1: \'hello\', msg2: '\'there\'})">Click me</button>'
}

function myCallback(msg1, msg2) {
    alert('message is: ' + msg1 + ' ' + msg2);
}

Этот GIST довольно исчерпывающий в отношении привязки директивы: https://gist.github.com/CMCDragonkai/6282750

Взгляните на пункт 8

Еще один хороший ресурс: https://thinkster.io/egghead/isolate-scope-am

UPDATE: я обновил и исправил ваш plunkr: http://plnkr.co/edit/W4RnZeCaxfCbVcYeKXLD?p=preview

  • Будьте осторожны, чтобы выбрать угловую версию 1.x
  • ваш управляющий контроллер должен быть функцией, если вы используете bindToController. Пустая функция в порядке.
  • Посмотрите внимательно, как я назвал переменную для вызова myCallback и сравнил ее с этим вторым plunkr: http://plnkr.co/edit/OvCXC0jeycIOxyoQ0R9w?p=preview Сообщите мне, если вам нужно больше объяснений относительно этого момента в частности.
Поделиться
  • 0
    Разве это не template не templateUrl ?
  • 0
    Да, это исправлено. Спасибо
Показать ещё 9 комментариев
0

Посмотрите этот пример. Использовать компиляцию $ compile для привязки событий

var app = angular.module('app', []);
app.controller('MyController', function($scope){
    $scope.buttonClick = function(msg ){
      console.log(msg);
       $scope.msg = msg;
    };
}).directive('directive', function($compile) {
    return {
        restrict : 'E',
        link : function(scope, element){
            
                var content = $compile('<div><button type="button" ng-click="buttonClick(' + "'Test Msg'" + ')">Click me</button> {{msg}}')(scope);
                element.append(content);
            
        }
    };
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="MyController">
   <directive></directive>
</div>
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню