Check out this code snippet on plnkr.co. Within the link function of the directive, calling controller.$render() was successful. However, when attempting to override the controller.$render function, it does not execute as expected. The statement
console.log('overridden $render function called');The contents of script.js are as follows:
var app = angular.module('myApp', []);
app.directive('test', function () {
return {
require: '?ngModel',
link: function ($scope, $element, $attr, controller) {
if (!controller) {
console.log("Controller for ngModel not found");
return;
} else {
console.log("Controller for ngModel found");
controller.$setViewValue('qwerty');
//controller.$render();
controller.$render = function(){
console.log('Overridden $render function called');
}
}
}
};
});
The contents of index.html are as follows:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div>TODO write content </div>
<input test type="text" ng-model="name" >
<h1>name: {{name}}</h1>
</body>
</html>