Question

我的表单中有这个输入字段

<input type="number" style="display:none" ng-model="frequency" id="frequencyDisplay">
            </div>

当我更改滑块时，此输入字段的值会更改，由此jquery

指定

    $(".dial").knob({
        'min':1,
        'max':180,
        change: function(value){
            $("#frequencyDisplay").val(Math.round(value));
            console.log(value);
        }
    });

但是，我无法访问ng-model频率，因为它似乎是空白的。

在我的控制器中，

$scope.frequency是空值。它没有任何附加条件。我绝对使用控制台检查#frequencyDisplay是否有值。只是ng-model无法访问它。任何想法如何？

Answer 1

可能需要更新范围 - 使用$scope.apply()将对控制器/指令内的任何更改进行角度查找。

https://docs.angularjs.org/api/ng/type/ $ rootScope.Scope＃$申请 https://docs.angularjs.org/api/ng/type/ $ rootScope.Scope＃$消化

Answer 2

这样的事情可以解决问题（：

＆＃13;

angular.module('myApp', [])
  .controller('myCtrl', function($scope, $timeout) {
    $scope.frequency = 0;    
    $scope.setFrequency = function(value) {
      $timeout(function(){ 
        $scope.frequency = value;
      });
    }
  });


$(function() {
  $("#target").on("change paste keyup", function() {
    var value = Math.round($(this).val());
    var e = document.getElementById('frequencyDisplay'); 
    var $timeout = angular.element(e).injector(['ng']).get('$timeout');    
    var scope = angular.element(e).scope();
    scope.setFrequency(value);    
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
  <input type="number" id="target" />
  <input type="number" ng-model="frequency" id="frequencyDisplay" />
</body>

＆＃13;

Angular：从输入字段抓取值，用jquery动态绑定

2 个答案: