Question

我正在尝试制作一个从两个输入源读取的指令，并做一些事情把它变成一个。所以要做到这一点，我正在听我的两个输入的变化，并将新的组合值分配给我的指令的ngModel。

问题是我还需要知道何时在指令之外修改ngModel以执行反向过程并正确设置我的两个指令输入源的值。有一个正确的方法吗？

我制作了一个片段以更好地说明问题，这不是我的实际指示。

angular.module('myapp', [])

.controller('AppController', function($scope, $timeout) {
  $scope.data = {
    value: ''
  };
  
  $timeout(function() {
    $scope.data.value = 'hellooooo';
  }, 5000);
})

.directive('sampleDirective', function() {
  return {
    require: 'ngModel',
    restrict: 'E',
    template: '<input ng-model="data.input1" ng-change="changed()"><input ng-model="data.input2" ng-change="changed()">',
    scope: {
      ngModel: '='
    },
    controller: function($scope) {
      $scope.data = {};
      $scope.changed = function() {
        $scope.ngModel = $scope.data.input1 + ' + ' + $scope.data.input2;  
      }
      
      // The watch is running even when the ngModel is modified inside the changed function above 
      // I want it to only run when the model is changed from outside the directive, like
      // I'm doing in the AppController.
      $scope.$watch('ngModel', function(value) {
        if (value) {
          // Just simulating some processing
          var length = value.length;
          
          $scope.data.input1 = value.slice(0, length/2);
          $scope.data.input2 = value.slice(length/2, length-1);
        }
      });
    }
  };
});

<div ng-app="myapp">
  
  <div ng-controller="AppController">
    <sample-directive ng-model="data.value"></sample-directive>

    <br>
    <br>
    <div>{{ data.value }}</div>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.js"></script>

Answer 1

你有什么自定义输入控件。它是一个输入控件，有2个文本框，但＆＃34;模型＆＃34;实际上是两者的结合。

实现一个支持＆＃34;支持的自定义输入控件。 date_format='%Y%m%d' of，即与ngModel的其他指令集成，您的指令也需要require: ngModel并使用require: ngModel挂钩进行集成。

所以，不要只做ngModelController。这样，您就可以双向绑定到附加到scope: { ngModel: "=" }属性的模型，但是当您使用ng-model设置此值时，事情将无法正常工作。

Angular在其example of a custom input control文档中提供了ngModelController。简而言之，您需要协调设置scope.ngModel = "something" - 基础视图更改时，设置视图 - 模型更改时。

$viewValue

然后，您的控件将与支持.directive("sampleDirective", function(){ return { require: "ngModel", scope: true, template: '<input ng-model="d.input1" ng-change="viewChanged()">\ <input ng-model="d.input2" ng-change="viewChanged()">', link: function(scope, element, attrs, ngModel){ var d = scope.d = {}; ngModel.$render = render; scope.viewChanged = read; // defines how to render based on model changes function render(){ var modelValue = ngModel.$modelValue || ""; var length = modelValue.length; d.input1 = modelValue.slice(0, length/2); d.input2 = length > 1 ? modelValue.slice(length/2, length) : ""; }; // defines how to set the model based on DOM changes function read(){ var newViewValue = d.input1 + d.input2; ngModel.$setViewValue(newViewValue); } } }; });的任何其他指令一起使用，例如ngModel或required或ng-pattern，并且可以参与表单验证：

ng-change

<强> Demo

Answer 2

相当奇怪的要求，但您可以更改指令以使用ngModelController而不是

.directive('sampleDirective', function() {
  return {
    require: 'ngModel',
    restrict: 'E',
    template: '<input ng-model="data.input1" ng-change="changed()"><input ng-model="data.input2" ng-change="changed()">',
    scope: {
      ngModel: '='
    },
    link: function(scope, element, attributes, ngModelCtrl) {
      // This will be called when it is changed from outside the directive
      ngModelCtrl.$formatters.push(function(value) {
        if (value) {
          // Just simulating some processing
          var length = value.length;

          scope.data.input1 = value.slice(0, length/2);
          scope.data.input2 = value.slice(length/2, length-1);
        }
        return value;
      });

      scope.changed = function() {
        // Set the model value from inside the directive
        ngModelCtrl.$setViewValue(scope.data.input1 + ' + ' + scope.data.input2);
      }
    },
    controller: function($scope) {
      $scope.data = {};
    }
  };
})

从指令内部观察ngModel的外部更改的正确方法

2 个答案: