AngularJS with Rails doesn't recognize $scope

Question

I'm working on a project in Rails that also uses AngularJS. First of all, I have a variable called @resource that contains an end time

<input style="display:none" ng-model="remainingTime" ng-init="remainingTime = <%= (resource.available_until.to_f - DateTime.now.to_f).to_i %>">

This obtains the remaining time for an X task and is displayed as follows (without display none).

That value obtained I must access it from the controller.

In the controller I have the following:

 function UserEvaluationsNewCtrl ($log, $scope) {
    console.log($scope.remainingTime)
}

When I want to access from the controller, the variable show "undefined" :/

Any help is useful. Thank you!!!

Edited:

console.log($scope):

remainingTime=-39698

-The negative number is correct-

Edited 2: Complete controller:

;(function () {
  'use strict';

  // Define controller
  function UserEvaluationsNewCtrl ($log, $scope) {
    $log.debug('UserEvaluationsNewCtrl: Hi')
    var vm = this

    vm.data = angular.extend({}, rails_data || {})
    vm.evaluationData = vm.data.resource
    vm.evaluationDataStringified = ''

    $scope.$watch(function(){
      return vm.evaluationData
    }, function(newValue, oldValue){
      vm.evaluationDataStringified = angular.toJson(newValue)
      $log.debug('ResourcesNewCtrl: $watch vm.evaluationDataStringified: to JSON output:', vm.evaluationDataStringified)
    }, true)

    console.log($scope)
  }

  // Inject dependencies
  UserEvaluationsNewCtrl.$inject = ['$log', '$scope']

  // Register controller
  angular
    .module('app.controllers.user_evaluations.new', [])
    .controller('UserEvaluationsNewCtrl', UserEvaluationsNewCtrl)
})();

can you change your console.log(test) line to console.log($scope) and update the question with the output you get — Subash
– Subash, Commented Feb 7, 2018 at 22:56

Phan Việt · Accepted Answer · 2018-02-08 01:50:30Z

1

Reason: The controller is being created before the remainingTime variable is added to the $scope object. Don't trust your console.log with object.

Solution:

Use $watch

$scope.$watch('remainingTime', function() { alert($scope.remainingTime); });
or Use $timeout

$timeout(function () { alert($scope.remainingTime); });

answered Feb 8, 2018 at 1:50

Phan Việt

1,37311 silver badges13 bronze badges

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

2 Comments

José Antonio Camus Godoy Over a year ago

It's true, the alert shows the correct time remaining but how can I use the variable in a function? Really $scope.remainingTime contains the time? When passed as an argument of the countdown function the variable does not exist (undefined)

José Antonio Camus Godoy Over a year ago

I made it! I called the function instead of the alert! Thank you very much!

GaryL · Accepted Answer · 2018-02-08 00:41:24Z

0

I think what is happening is:

Your controller initializes the empty value.
You have connected your div to the variable, which it can’t have.
You have assigned a value to the <input> field, which is not connected to the $scope.remainingTime variable.

Try using the change below which should do the following:

At html page init (which completes after the controller init) use <input ng-init=... to set the value of remainingTime.

Attach the <input> field to the remainingTime scope variable.

<input style="display:none" ng-init="remainingTime = <%= (resource.available_until.to_f - DateTime.now.to_f).to_i %>)" />
<div >
   <input ng-model="remainingTime"> 
</div>

You may be able to (should be able to?) use both ng-init and ng-model together on the real <input> field, but I've had uncertain results doing that.

Cheers, Gary.

edited Feb 8, 2018 at 0:41

answered Feb 8, 2018 at 0:22

GaryL

1,4709 silver badges11 bronze badges

1 Comment

José Antonio Camus Godoy Over a year ago

Thanks for answering!. I edited the question with your clarifications. The problem is almost the same :( any ideas?

Collectives™ on Stack Overflow

AngularJS with Rails doesn't recognize $scope

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related