Код директивы
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()
директивы.
функция link
имеет scope
пропускания в качестве первого параметра функции. Если ваши данные находятся в одной и той же scope
, scope
к нему через это:
link: function(scope, el, attrs){
el.click(function(){
scope.switch.isOff = false;
})
}
Важно отметить, что el.click
не запускает цикл $digest
- поэтому ваши изменения данных не будут отображаться в представлении до тех пор, пока не произойдет цикл. Вы можете принудительно использовать один из $timeout
или $apply
(остерегайтесь потенциальных проблем $apply()
tho)