解决方案

Question

我真的是AngularJS的新手。我想将某些对象从View（HTML）传递到我的控制器（JS）。实际上，我的客户将以HTML格式向我发送数据，我必须获取该数据并在控制器中处理该数据，然后在屏幕上显示处理后的输出。他将使用一种称为ServiceNow-https://www.servicenow.com/的后端技术。

我看到的所有解决方案都具有诸如单击事件或更改事件之类的事件，但就我而言，这必须在页面加载时完成。

我正在使用隐藏的Input类型将数据传递给控制器，这似乎不起作用。那么我还有其他方法可以做到这一点吗？这是我要使用的代码

<div ng-controller="progressController" >
  <input type="hidden" value="ABCD" ng-model="testingmodel.testing">
</div>

app.controller('progressController', function($scope) {
  console.log($scope.testingmodel.testing);
});

当我在Controller中console.log变量时，它表示未定义。

Answer 1

您应该使用ng-change或$ watch

<div ng-controller="progressController" >
  <input type="hidden" value="ABCD" ng-model="testingmodel.testing" ng-change="change()">
</div>
app.controller('progressController', function($scope) {
   $scope.change = function(){
       console.log($scope.testingmodel.testing);
   }

});

或者：

app.controller('progressController', function($scope) {
   $scope.$watch('testingmodel.testing', function(newValue, olValue){
       console.log(newValue);
   }

});

如果使用ng-change，则仅当用户更改UI中的值时才调用该函数。如果仍然使用$ watch，则会调用该函数。

Answer 2

您不能使用value属性来设置或获取任何控件的值，angularJS不能使用ngModel来设置或获取值。

在这里您应该尝试这种方式

app.controller('progressController', function($scope) {
  //from here you can set value of your input
  $scope.setValue = function(){
      $scope.testingmodel = {}
      $scope.testingmodel.testing = 'ABCD';
  }

  //From here you can get you value 
  $scope.getValue = function(){
   console.log($scope.testingmodel.testing);
  }
});

如果要从html端进行绑定，则应尝试如下操作

<input type="text" ng-model="testingmodel.testing"> 
<input type="hidden" ng-model="testingmodel.testing">

Answer 3

您做console.log(...)还为时过早。目前，您的控制器没有该视图中的任何信息。

第二个问题是您将视图绑定到控制器中的变量，而不是相反。您的$scope.testingmodel.testing是undefined，显然，它在undefined视图中的值。

解决方案

使用ng-init初始化模型，并使用控制器的钩子$postLink初始化所有内容后获取值。

<div ng-controller="progressController" >
    <input type="hidden" ng-model="testingmodel.testing" ng-init="testingmodel.testing = 'ABCD'">
</div>

app.controller('progressController', function($scope) {
    var $ctrl = this;

    $ctrl.$postLink = function() {
        console.log($scope.testingmodel.testing);
    };
});

编辑：额外提示

我不建议使用$scope来存储数据，因为这样会使向新角度的迁移更加困难。

改为使用控制器。

类似这样的东西：

<div ng-controller="progressController as $ctrl" >
    <input type="hidden" ng-model="$ctrl.testingmodel.testing" ng-init="$ctrl.testingmodel.testing = 'ABCD'">
</div>

app.controller('progressController', function() {
    var $ctrl = this;

    $ctrl.$postLink = function() {
        console.log($ctrl.testingmodel.testing);
    };
});

AngularJS-如何将数据从View（HTML）传递到Controller（JS）

3 个答案:

解决方案

编辑：额外提示