如何使用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來檢查此更改。