带有 Rails 的 AngularJS 无法识别 $scope

Question

我正在使用 Rails 开发一个也使用 AngularJS 的项目。 首先，我有一个名为 @resource 的变量，其中包含结束时间

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

获取X任务的剩余时间，显示如下（不显示无）。

获得的值我必须从控制器访问它。

在控制器中我有以下内容：

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

当我想从控制器访问时，变量显示“未定义”：/

任何帮助都是有用的。谢谢！！！

已编辑：

console.log($scope):

剩余时间=-39698

-负数是正确的-

编辑 2： 完整的控制器：

;(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)
})();

Answer 1

原因：控制器是在 remainingTime 变量添加到 $scope 对象之前创建的。不要相信你的 console.log 有对象。

解决方案：

1. 使用 $watch

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

2. 或使用 $timeout

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

Answer 2

我认为正在发生的事情是：

1. 您的控制器初始化空值。
2. 您已将您的 div 连接到它不能拥有的变量。
3. 您已为<input> 字段分配了一个值，该字段未连接到 $scope.remainingTime 变量。

尝试使用下面的更改，它应该执行以下操作：

1. 在 html 页面初始化（在控制器初始化后完成）使用 <input ng-init=... 设置 remainingTime 的值。

2. 将<input> 字段附加到remainingTime 范围变量。

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

您也许可以（应该可以？）在真正的<input> 字段上同时使用ng-init 和ng-model，但我这样做的结果不确定。

干杯，加里。