Basically I'm creating a character counter that has 2 input fields to fill out a template. Problem is that 1 of the fields is optional and has boilerplate text that adds to the char count if selected. So my biggest hangup is getting the length of the strings in both input areas. The render method is not running when the model changes. I'm pretty confused on why that is.
var $scope;
var app = angular.module('miniapp', []);
function Ctrl($scope) {
$scope.form = {}
}
app.directive('charcount', function(){
return {
restrict: 'E',
require: 'ngModel',
link: function (scope, el, attrs, controller){
controller.$render = function(){
var data = controller.$modelValue
var codeLen = 0, descLen = 0;
if (data.code){
codeLen = data.code.length
}
if (data.desc){
descLen = data.desc.length
}
console.log(descLen, codeLen);
}
}
}
})
Fiddle: http://jsfiddle.net/dj6mX/481/
I've never used $render but I use ng-change to call function on textInput and create countChange function to count length of text.
Example in HTML
<div ng-app="miniapp">
<div ng-controller="Ctrl">
<form>
<label for="desc">Description</label>
<textarea ng-change="countChange()" id="desc" ng-model="form.desc"></textarea>
<charcount ng-model="form">
<label for="code">Code</label>
<input id="code" ng-change="countChange()" ng-model="form.code"/>
</form>
<p id="preview">Some filler text here user input {{form.desc}}
<span ng- show="form.code">
Some optional text here plus code {{form.code}}
</span>
</p>
</div>
</div>
in directive
var app = angular.module('miniapp', []);
function Ctrl($scope) {
}
app.directive('charcount', function(){
return {
restrict: 'E',
require: 'ngModel',
controller: function($scope) {
$scope.countChange= function() {
var codeLen = 0;
var descLen = 0;
if($scope.form.desc){
descLen = $scope.form.desc.length;
}
if($scope.form.code){
codeLen = $scope.form.code.length;
}
console.log(codeLen,descLen);
}
},
link: function (scope, el, attrs, controller){
}
}})
sory i'm bad english but i hope this will help you. XD