Angular 1.4 BETA Text Binding bug
HTML
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
<body ng-app="myApp" ng-init="testObject={switch:false}">click that:
<div switch ng-model="testObject.switch">
<hr>transcluded input:
<input type="checkbox" ng-model="testObject.switch">
<hr>
</div>
</body>
CSS
.switch {
display:block;
cursor:pointer;
background:yellow;
}
JavaScript
var booleanSwitchModule = angular.module('myApp', []);
booleanSwitchModule.directive('switch', [
function () {
return {
scope: {},
require: "?^ngModel",
link: function (scope, elem, attr, ngModel) {
var timesChanged = 0;
scope.$watch(function() {return ngModel.$modelValue; }, function (val) {
if (val != undefined) {
alert("model changed " + ++timesChanged + " times");
scope.switchPosition = scope.model;
}
});
},
restrict: 'EA',
replace: true,
transclude: true,
template: '<label class="switch">' +
'directive scope model: {{ngModel}}' +
'<span ng-transclude></span>' +
'</label>',
}
}]);