43

让我们看看我的指令：

angular.module('main').directive('datepicker', [
function() {
    return {
        require: '?ngModel',
        link: function(scope, element, attributes, ngModel) {
            ngModel.$modelValue = 'abc'; // this does not work
            // how do I change the value of the model?

那么，如何更改 ng-model 的值呢？

4

5 回答 5

54

有不同的方法：

  1. $setViewValue()更新视图和模型。大多数情况下就足够了。
  2. 如果您想断开视图与模型的连接（例如，模型是一个数字，但视图是一个带有千位分隔符的字符串），那么您可以直接访问$viewValue和$modelValue
  3. 如果您还想覆盖的内容ng-model（例如，指令更改小数位数，更新模型），注入ngModel: '='范围并设置scope.ngModel

例如

  return {
     restrict: 'A',
     require: 'ngModel',
     scope: {
         ngModel: '='
     },
     link: function (scope, element, attrs, ngModelCtrl) {

        function updateView(value) {
            ngModelCtrl.$viewValue = value;
            ngModelCtrl.$render(); 
        }

        function updateModel(value) {
            ngModelCtrl.$modelValue = value;
            scope.ngModel = value; // overwrites ngModel value
        }
 ...

链接：

于 2015-08-05T08:35:27.737 回答
31

要使用复杂的绑定表达式，您应该使用$parse服务和assign方法。

有关更多信息，请观看来自 ng-conf 的视频 - 全部都是关于您可以使用 ng-model 指令做的很酷的事情：https ://www.youtube.com/watch?v=jVzymluqmg4

app.directive('datepicker', ['$parse',
    function($parse) {
        return {
            require: '?ngModel',
            link: function(scope, element, attributes, controller) {
                // $parse works out how to get the value.
                // This returns a function that returns the result of your ng-model expression.
                var modelGetter = $parse(attributes['ngModel']);
                console.log(modelGetter(scope));

                // This returns a function that lets us set the value of the ng-model binding expression:
                var modelSetter = modelGetter.assign;

                // This is how you can use it to set the value 'bar' on the given scope.
                modelSetter(scope, 'bar');

                console.log(modelGetter(scope));
            }
        };
    }
]);
于 2014-03-26T10:52:15.777 回答
4

您尝试的实际上是有效的：请参阅此 Plunker

您不会在输入中“看到”它，因为以这种方式更改模型不会调用controller.$render()设置新的 controller.$viewValue.

但是你为什么不简单地改变这个$scope值（除非你不知道，但这会很奇怪）：

angular.module('main').directive('datepicker', [function() {
    return {
        require: '?ngModel',
        link: function(scope, element, attributes, controller) {
          var model = attributes['ngModel'];
          scope[model] = 'bar';
        }
    };
}]);

在你的 html 中：

<input ng-model="yourVariable" datepicker>

编辑：（动态解决方案）

angular.module('main').directive('datepicker', [function() {
    return {
        require: '?ngModel',
        link: function(scope, element, attributes, controller) {
          // get the value of the `ng-model` attribute
          var model = attributes['ngModel'];

          // update the scope if model is defined
          if (model) {
            scope[model] = 'bar';
          }
        }
    };
}]);
于 2014-03-25T16:29:08.390 回答
1

这适用DatePicker于我的网站

link: function(scope, elem, attrs, ngModel) {
         scope.$apply(function(){
             ngModel.$viewValue = value;
         }
}
于 2015-05-29T18:55:34.287 回答
1

这是我遇到的最好的解释。这对我很有帮助，并汇集了此处其他许多答案的详细信息。

提示：请仔细阅读整篇文章而不是浏览它，否则您可能会错过一些关键部分！

https://www.nadeau.tv/post/using-ngmodelcontroller-with-custom-directives/

于 2016-06-14T22:07:50.910 回答