Angularjs assigning values to scope not working inside function

Question

I am developing a web application in angular js. I have textbox and directive. My textbox should take only values in certain range otherwise error message should be displayed. Below HTML code.

<input class="" type="text" name="rangeNumber" ng-attr-placeholder="{{ 'DownPayment' }}" ng-model="DownPayment" range-number="range">

<ul class="error-msgs">
    <li ng-show="!form5.rangeNumber.$invalid && form5.rangeNumber.$dirty">Number not in range</li>
</ul>

Below is my directive.

app.directive('rangeNumber', function () {
    return {
        require: 'ngModel',
        link: function (scope, elem, attrs, ctrl) {
            if (!ctrl) return;

            var range = scope.$eval(attrs.rangeNumber);
            range = range.split(',').map(Number);

            ctrl.$parsers.push(function (value) {
                value = +value;
                var isValidRange = !(value >= range[0] && value <= range[1]);

                ctrl.$setValidity('range', isValidRange);
                return value;
            });


        }
    };
});

Below is my function where i am assigning range.

function fillsiebelloandetails(SiebelLoanDetails)
{
  //some http ajax call and get values and assign it ti range.
  $scope.range = '1,7';
}

Here I am facing problem if I assign $scope.range = '1,7'; inside fillsiebelloandetails it is not working. if I write $scope.range = '1,7'; outside function it works fine. May I know why this is happening? Any help would be appreciated. Thank you.

Is your fillsiebelloandetails(SiebelLoanDetails) being called when page loads? — Vivz
– Vivz, Commented Jul 10, 2017 at 4:56
Yes. On page load fillsiebelloandetails(SiebelLoanDetails) i am calling. — Niranjan Godbole
– Niranjan Godbole, Commented Jul 10, 2017 at 4:56
Post more code, from the above code it is unclear as to what is causing the issue. — Vivz
– Vivz, Commented Jul 10, 2017 at 5:25

aseferov · Accepted Answer · 2017-07-10 05:32:06Z

1

You need watch rangeNumber changes in directive

    link: function (scope, elem, attrs, ctrl) {
        if (!ctrl) return;

        scope.$watch(attrs.rangeNumber, function(){
            var range = scope.$eval(attrs.rangeNumber);
            range = range.split(',').map(Number);

            ctrl.$parsers.push(function (value) {
               value = +value;
               var isValidRange = !(value >= range[0] && value <= range[1]);

               ctrl.$setValidity('range', isValidRange);
              return value;
            });

        })



    }

answered Jul 10, 2017 at 5:32

aseferov

6,4233 gold badges20 silver badges24 bronze badges

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

2 Comments

Niranjan Godbole Over a year ago

For example if var a=10 and var b=20 then how can i write $scope.range=?

aseferov Over a year ago

$scope.range = a + ',' + b

Bhesh Raj Pokhrel · Accepted Answer · 2017-07-10 05:34:06Z

0

When you define a variable within function its scope is treated as functional(local) scope so the issue has occurred.You should declare the variable at the directive level scope.For this, you can try as follows.

Declare the variable outside the function.
Then assign the value from inside the function.

Eg.

......

    var vm=this;
    vm.range=[];   //declare variable outside the function 
    function fillsiebelloandetails(SiebelLoanDetails)
    {
      //some http ajax call and get values and assign it ti range.
      vm.range = '1,7';
    }

I think i might be helpful for you.

answered Jul 10, 2017 at 5:34

Bhesh Raj Pokhrel

292 bronze badges

Collectives™ on Stack Overflow

Angularjs assigning values to scope not working inside function

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related