Почему функция, переданная директиве, не обновляет переменную области видимости?

В этом коде AngularJS:

http://jsfiddle.net/edwardtanguay/xfbgjun5/8/

У меня есть функция области видимости addCustomer(), которая не будет обновлять переменную области видимости score:

.controller('mainController', function ($scope) {
    $scope.customers = ['First','Second','Third'];
    $scope.score = 'sdfkj';
    $scope.addCustomer = function() {
        $scope.score = 'this does not work';
        console.log('but it obviously gets here');
    }
    $scope.changeIt = function() {
        $scope.score = 'this works';
    }
    ...
})

Я передаю функцию addCustomer() как add:

return {
  restrict: 'A',
    scope: {
        datasource: '=',
        add: '&'
    },
    link: link
};

а затем вызовите его в моей директиве:

function addItem() {
    scope.add();
    items.push('new customer');
    render();
}

Почему функция области addCustomer() не обновляет переменную области score?


angularjs angular-directive
person Edward Tanguay    schedule 18.08.2015    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Глядя на вашу скрипку, ваша проблема здесь:

element.on('click', function(event) {
    if(event.target.id === 'addItem') {
        addItem();
        event.preventDefault();
    }
});

Выполняя element.on, вы подключаете свое собственное событие в angular. Это не сработает, и вам также нужно сделать это:

element.on('click', function(event) {
    if(event.target.id === 'addItem') {
        addItem();
        event.preventDefault();
        scope.$apply();
    }
});

Это связано с тем, что «щелчок» произошел за пределами angular, если вы построите его таким образом. Вы также должны изучить, как создать директиву, поскольку это не так, как вы ее создаете (с переменной html, а затем добавляя ее). В вашем коде директивы не должно быть html (за исключением определенных обстоятельств).

person Mathew Berg    schedule 18.08.2015