Question

我们正在尝试在angularjs中使用jquery时间输入组件。我们有一个时间输入组件的指令。当我尝试根据DOM值从指令更改ngModel时，不反映模型。请参阅下面的控制器，index.html，app.js。

<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <link rel="stylesheet" href="style.css" />
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="jquery.plugin.js"></script>
    <script src="jquery.timeentry.js"></script>
    <script data-require="angular.js@1.0.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js" data-semver="1.0.8"></script>
    <script src="script.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <p>Time {{orderPermitViews[0].permitDetails[0].effectiveTimeForDispaly}}!</p>
    <div ng-repeat="permitDetail in orderPermitViews[0].permitDetails">
      <input type="text" name="spinner" class="time-spinner" 
      time-spinner ng-model="permitDetail.effectiveTimeForDispaly" >
    </div>
  </body>

</html>

angular.module('plunker', [])

.directive('timeSpinner', function() {
  return {
    restrict: 'A',
        scope: {timeModel: "=ngModel"},
        link: function( scope, elem, attrs) {
            $(elem).timeEntry({
                        spinnerImage: 'assets/img/spinnerUpDown.png', 
                        spinnerSize: [15, 16, 0], 
                        spinnerBigSize: [30, 32, 0], 
                        spinnerIncDecOnly: true,
                        show24Hours: true
                    }).change(function () {
                 scope.timeModel = $(elem).timeEntry('getTime');
                          console.log("Time model:" + scope.timeModel);
                    });

                    scope.$watch('timeModel', function(newValue, oldValue) {
                        $(elem).timeEntry('setTime', newValue);
                        console.log("Set time:" + newValue);
                    });
         }
    }
})

.controller('MainCtrl', function($scope) {
  var permitDetails = new Array();
  $scope.orderPermitViews = new Array();
  $scope.orderPermitViews[0] = {};
  $scope.orderPermitViews[0].permitDetails = new Array();
  $scope.orderPermitViews[0].permitDetails[0] = {};
  $scope.orderPermitViews[0].permitDetails[0].effectiveTimeForDispaly = new Date();

});

当我更改文本时，我看到更改功能正在执行并更新模型。但是它没有反映在HTML {{orderPermitViews [0] .permitDetails [0] .effectiveTimeForDispaly}}中。我需要一些帮助来弄清楚这里出了什么问题。

隔离范围不会更新模型 - 角1.6

0 个答案: