Изменение данных контроллера с помощью директив AngularJS

0

Код директивы

app.directive('uiSwitch', function() {
    return {
        restrict: 'E',
        replace: true,
        templateUrl: '_lib/custom/ui-switch/ui-switch-template.html', // markup for template
        scope: {
                info: '='
        },
        link: function(scope, el, attrs){

            el.click(function(){
                // How do I change the controller data here?
            });

        }
    };
});

Код шаблона директивы:

<button class="switch-container" ng-click="info.callback()" ng-class="{off: info.off}">
        <div class="switch-inner">
        <div class="option option-on">{{info.labels[0]}}</div>
        <div class="switch"></div>
        <div class="option option-off">{{info.labels[1]}}</div>
    </div>
    <div class="shadow"></div>
</button>

Как я называю директиву из моего шаблона контроллера:

<ui-switch info="switch"></ui-switch>

И соответствующий код в моем контроллере:

    $scope.switch = {
        labels: ['Friend', 'Foe'],
        callback: function(){
            c('switch clicked')
        }
    }

Я хотел бы обновить некоторое свойство на моем контроллере, когда переключатель будет нажат, например. $scope.switch.isOff = false. Однако я не знаю, как обновлять данные контроллера из функции link() директивы.

Теги:
angularjs-directive

1 ответ

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

функция link имеет scope пропускания в качестве первого параметра функции. Если ваши данные находятся в одной и той же scope, scope к нему через это:

link: function(scope, el, attrs){
    el.click(function(){
         scope.switch.isOff = false;
    })
}

Важно отметить, что el.click не запускает цикл $digest - поэтому ваши изменения данных не будут отображаться в представлении до тех пор, пока не произойдет цикл. Вы можете принудительно использовать один из $timeout или $apply (остерегайтесь потенциальных проблем $apply() tho)

  • 0
    Спасибо, включая подсказку об использовании $ timeout для запуска цикла дайджеста.

Ещё вопросы

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