I have the following code snippet.
<!DOCTYPE html>
<html ng-app="exampleApp">
<head>
<title>CustomForms</title>
<script src="angular.js"></script>
<link href="bootstrap.css" rel="stylesheet" />
<link href="bootstrap-theme.css" rel="stylesheet" />
<script type="text/ng-template" id="triTemplate">
<div class="well">
<div class="btn-group">
<button class="btn btn-default">Yes</button>
<button class="btn btn-default">No</button>
<button class="btn btn-default">Not Sure</button>
</div>
</div>
</script>
<script>
angular.module("exampleApp", [])
.controller("defaultCtrl", function ($scope) {
$scope.dataValue = "Not Sure";
})
.directive("triButton", function () {
return {
restrict: "E",
replace: true,
require: "ngModel",
template: document.querySelector("#triTemplate").outerText,
link: function (scope, element, attrs, ctrl) {
element.on("click", function (event) {
setSelected(event.target.innerText);
scope.$apply(function () {
ctrl.$setViewValue(event.target.innerText);
});
});
var setSelected = function (value) {
var buttons = element.find("button");
buttons.removeClass("btn-primary");
for (var i = 0; i < buttons.length; i++) {
if (buttons.eq(i).text() == value) {
buttons.eq(i).addClass("btn-primary");
}
}
}
ctrl.$render = function () {
console.log("render");
setSelected(ctrl.$viewValue || "Not Sure");
}
}
}
});
</script>
</head>
<body ng-controller="defaultCtrl">
<div><tri-button ng-model="dataValue"/></div>
<div class="well">
Value:
<select ng-model="dataValue">
<option>Yes</option>
<option>No</option>
<option>Not Sure</option>
</select>
</div>
</body>
</html>
When I changed the value of select option, then the ctrl.$render gets called, but why when I click on button the ctrl.$render never gets called?
Aucun commentaire:
Enregistrer un commentaire