Angular directive实践($compile , ngModel ...)

.directive('ngCalculator', function($compile, $timeout){
return {
restrict: 'EA',
require: 'ngModel',
scope: {
devices: '=',
key: '=',
displayName: '=',
bindAttr: '='
},
link: function(scope, element, attrs, ngModel) {
scope.results = {};
var text = attrs.ngCalculator;
var replacements = text.match(/\[[a-zA-Z0-9]+\]/g);
var formula = text.match(/\<\-(.+)\-\>/);
text = text.replace(formula[0], '');
for(var i = 0; i < replacements.length; i++) {
var id = replacements[i].replace('[','').replace(']','');
text = text.replace(replacements[i], '<input type="text" ng-model="results.'+id+'" style="width: 80px;margin: auto 10px;"/>');
}
text = '<div>'+text+'</div>';
element.replaceWith($compile(text)(scope));
scope.$watchCollection('results', function() {
var input_check = true;
angular.forEach(replacements, function(replacement) {
var id = replacement.replace('[','').replace(']','');
var modelValue = parseInt(scope.results[id]);
if(!modelValue) {
input_check = false;
}
});
if(input_check == true){
var formula_instance = formula[1];
angular.forEach(replacements, function(replacement) {
var id = replacement.replace('[','').replace(']','');
var regex = new RegExp(id, "g");
formula_instance = formula_instance.replace(regex, scope.results[id]);
});
ngModel.$setViewValue(scope.$eval(formula_instance));
ngModel.$render();
}
});
}
}
})

这是一个自定义计算器的指令,用来解析一串字符，效果图如下:



能处理穿插在自然语言里计算公式.

使用方法:

<div ng-calculator="{{ sample }}" ng-model="result"></div>
<script>
app.controller( ... , ['$scope',...,function($scope,...){
$scope.sample = "我有[a]存款，我想拿出[b]%，作为我的结婚费用。
目前我每个月收入[c]，我想拿出[d]%，作为我的婚礼费用。（完善你的婚期，我们将更精确的帮您做预算）。
男方父母会给我们[e]元，女方父母会给我们[f]元。
我们预计会有额外的[g]元，可以用于婚礼。
<-a*b*0.01+c*d*0.01*12+e+f+g->                      ";
$scope.$watch('result', function(new,old){
console.log(result);
});
}]);
</script>

其实sample字符串是生成表单的，
这个是变量替换，将变量替换成 input[type="text"]，

<-a*b*0.01+c*d*0.01*12+e+f+g->

这是变量拼凑起来的计算公式，

ngModel的result返回计算结果。