AngularJS : directive binding value to parent scope from template model

Question

I am trying to create an angular directive to behave the same as this jsfiddle that is done in jquery.

The purpose of the directive is to have the controller (parent) scope have a value of width, and have the directive display that value as a textbox and a fraction select list, but only storing the width as a value, not a whole number and a fraction. Here is my attempt that has it partially working, but I can't get it to update the directive model values when changing the parent value.

http://jsfiddle.net/Pp6rZ/

In the fiddle you can see my commented out lines where I thought that I could add a watch to the width but this doesn't seem to work.

$scope.$watch('value', function(val){
   if(val && val !== '' && parseInt(val) !== 0){
    //  $scope.wholeAmount = parseInt($scope.value);
    //  $scope.fraction = getFraction($scope.value % 1);
    // }
   //});

In the angular directive example it doesn't update the whole number and fraction when changing the textbox unlike how the jquery fiddle works.

Any help would be greatly appreciated.

Update Working Solution

http://jsfiddle.net/arunpjohny/P3w3G/2

Arun P Johny · Accepted Answer · 2013-09-28 03:02:03Z

3

Try

app.directive('measurement', function () {
    return {
        restrict: 'E',
        scope: {
            value: '=',
            fractions: '='
        },
        template: "<input type='text' ng-model='wholeAmount' maxlength='3' /><select ng-model='fraction' ng-options='fraction for fraction in fractions'></select>",
        controller: ['$scope', function ($scope) {

        }],
        link: function postLink(scope, iElement, iAttrs, controller) {
            scope.$watch('value', function(value){
                scope.wholeAmount = parseInt(value) || 0;
                scope.fraction = getFraction(value % 1)
            });
            scope.$watch('wholeAmount', function(value){
                scope.value =  (parseInt(scope.wholeAmount) || 0) + eval(scope.fraction);
            });
            scope.$watch('fraction', function(value){
                scope.value =  (parseInt(scope.wholeAmount) || 0) + eval(scope.fraction);
            });
        }
    }
});

Demo: Fiddle

Note: eval() is used since there is no user input here

answered Sep 28, 2013 at 3:02

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

jdev4ls Over a year ago

Tried it and followed your fiddle and once try to type in the controller's width bounded text box , it quits working. Is the values recalculating both ways for you?

Arun P Johny Over a year ago

@jdev4ls also the getFraction method is buggy... need more time to fix it.. in the value if you give any decimal part other than .5 the method will crash... it has nothing to do with angular js.....

jdev4ls Over a year ago

thanks that worked, I am aware that the function is buggy, I pulled it off some website just to get by for now, the fractions list will only support fractions in the 8th's so 1/8, 1/4, 3/8, 1/2, 5/8, 3/4, 7/8.. I will fix that function now that I got it 2 way binding.

Collectives™ on Stack Overflow

AngularJS : directive binding value to parent scope from template model

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related