Bugün AngularJS'de $ watch kullanarak gerçekten garip davranışlarla karşılaşıyorum.
https://jsfiddle.net/yLeLuard/
Bu örnek bir state
değişkenin takip edecek bir hizmet içerir: Aşağıdaki örnek için kodumu basitleştirilmiş. Yönergeler, hizmet aracılığıyla state
değişkenini değiştirerek DOM'a bir tıklama olayını bağlamak için kullanılır.
bu örnekte iki sorun vardır:
- birinci kapatma düğmesi (üzerine ng tıklama özelliğiyle) sadece Ng- olmadan ikinci tıklamada
- iki düğme durumunu değiştirir tıklama tüm
main.html
<div ng-controller="main">
State: {{ api.isOpen | json }}
<div ng-click="" open>
<button>Open - Working fine</button>
</div>
<div ng-click="" close>
<button>Close - Works, but only on second click</button>
</div>
<div open>
<button>Open - Not Working</button>
</div>
<div close>
<button>Close - Not Working</button>
</div>
</div>
de devlet değiştirmiyoruz
main.js Eğer click
üzerinde yerli olay dinleyicisi kullanarak çünkü var
var myApp = angular.module('myApp', []);
myApp.controller('main', ['$scope', 'state', function($scope, state) {
$scope.api = state;
$scope.api.isOpen = false;
$scope.$watch('api.isOpen', function() {
console.log('state has changed');
});
}]);
myApp.directive('open', ['state', function(state) {
return {
restrict: 'A',
scope: {},
replace: true,
template: '<button>Open</button>',
link: function(scope, element) {
element.on('click', function() {
state.isOpen = true;
});
}
};
}]);
myApp.directive('close', ['state', function(state) {
return {
restrict: 'A',
scope: {},
replace: true,
template: '<button>Close</button>',
link: function(scope, element) {
element.on('click', function() {
state.isOpen = false;
});
}
};
}]);
myApp.service('state', function() {
return {
isOpen: null
};
});
Yönergelerinizi açıp kapatabilir ve bunun yerine 'ng-click =" api.isOpen = true "' ve 'ng-click =" api.isOpen = false "' işlevlerini kullanabilirsiniz. Bir 'click' olayı – floribon
@floribon'u bağlamak yerine yerel yönergelerin kullanılması daha iyidir, gerçek yönergelerimde çok daha fazla işlevsellik vardır, bu yüzden ng tıklama kullanamıyorum. Bunun yanı sıra, bunun neden düzgün çalışmadığını bilmek istiyorum. – Pascal
Anladım. Daha sonra 'ng-click' 'i kaldırın ve sadece direktifinizi saklayın. Olan şey ng-click'in bir sindirim sistemini tetiklemesiydi, bu yüzden çalışmak gibi görünüyordu ama güvenilmezdi – floribon