如何使用angularjs中的自定义指令更新输入文本值

Question

我是angularjs中较新的。我只是尝试使用自定义指令更新输入txt值。但我不能。在这里我显示了我的代码我做错了这段代码。有人帮我解释它是如何工作的。

var myApp = angular.module('myApp',[]); 
 

 
//myApp.directive('myDirective', function() {}); 
 
//myApp.factory('myService', function() {}); 
 
myApp.controller('MyCtrl',MyCtrl); 
 
function MyCtrl($scope) { 
 
    $scope.name = 'Superhero'; 
 
    $scope.myTime = '10:59'; 
 
} 
 

 

 
myApp.directive('myDirective', function() { 
 
    return { 
 
     restrict: 'A', 
 
     require: '?ngModel', 
 
     link: function (scope, element, attrs, ngModel) { 
 
      scope.$watch(attrs.ngModel, function (v) { 
 
       console.log('value changed, new value is: ' + v); 
 
       ngModel.$setViewValue('11') 
 
       //scope.ngModel = '11' 
 
       
 
      }); 
 
     } 
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-controller="MyCtrl"> 
 
    Hello, {{name}}! 
 
    
 
    
 
    <input type="text" my-directive ng-model="myTime" name="customTime"> 
 
    
 
</div>

Answer 1

您应该将myApp模块中注册MyCtrl控制器像下面。

​​

如果您需要将文本字段值更新为某一期望值，一旦你与更新的观察者使用$ setViewValue（）完成的，你需要调用$render()以及上NgModelController。

link: function (scope, element, attrs, ngModel) { 
    scope.$watch(attrs.ngModel, function (v) { 
     console.log('value changed, new value is: ' + v); 
     ngModel.$setViewValue('11'); 
     ngModel.$render(); 
    }); 
} 

这里是一个Pen来检查此更改。