解释（？）：

Question

假设我有如下指令：
1）如何在我的视图的控制器中访问data1和data2值？
2）我是否有可能以对象形式返回modelValue，例如：form.inputData.data1和form.inputData.data2

.directive('splitValue', function () {
    return {
        restrict: 'A',
        require: '^ngModel',
        scope: {
            ngModel: '='
        },
        link: function(scope, element, attrs, ngModelCtrl) {
            ngModelCtrl.$formatters.push(function (modelValue) {
                if (modelValue.indexOf(',') !== -1) {
                    scope.data1 = modelValue.split(',')[0];
                    scope.data2 = modelValue.split(',')[1];
                }

                return modelValue;
            })
        }
    }
});

<input type="text" ng-model="form.inputData" split-value>

Answer 1

演示：http://so.devilmaycode.it/retrieving-scope-in-directive-via-controller/

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

    myModule.controller("myController", function($scope) {

      $scope.elementToSplit1 = {
        inputVal: 'comma,separeted',
        data1: '',
        data2: '',
      };

      $scope.elementToSplit2 = {
        inputVal: 'comma,separeted',
        data1: '',
        data2: '',
      };

      // FOR TESTS to see if data is changing or not
      $scope.$watchCollection("elementToSplit1", function(newValue, oldValue) {
        console.log("elementToSplit1", $scope.elementToSplit1.data1, $scope.elementToSplit1.data2)
      });

      // FOR TESTS to see if data is changing or not
      $scope.$watchCollection("elementToSplit2", function(newValue, oldValue) {
        console.log("elementToSplit2", $scope.elementToSplit2.data1, $scope.elementToSplit2.data2)
      });

    });

    myModule.directive('splitValue', function() {
      return {
        template: function(element, attrs) {
          var currentModel = attrs.ngModel;
          var template = '<div class="input-group">' + '<span class="input-group-addon">{{' + currentModel + '.data1}}</span>' + '<span class="input-group-addon">{{' + currentModel + '.data2}}</span>' + '<input type="text" name="' + currentModel + '" class="form-control" ng-model="' + currentModel + '.inputVal">' + '</div>';
          return template;
        },
        replace: true,
        require: 'ngModel',
        link: function(scope, element, attrs, ngModel) {
          var currentModel = attrs.ngModel;
          scope.$watchCollection(attrs.ngModel + '.inputVal', function(newValue, oldValue) {
            if (newValue.indexOf(',') !== -1) {
              var splitStr = newValue.split(',');
              scope[currentModel].data1 = splitStr[0];
              scope[currentModel].data2 = splitStr[1];
            } else {
              scope[currentModel].data1 = '';
              scope[currentModel].data2 = '';
            }
          });
        }
      }
    });

<split-value ng-model="elementToSplit1"></split-value>
   <br>
<split-value ng-model="elementToSplit2"></split-value>

解释（？）：

对您的问题的快速回答是使用$parent将data1和data2设置回其父$scope，这是因为您的指示是定义它自己的scope。所以scope.$parent.data1 = modelValue.split(',')[0];会有用。

虽然如果你有一个元素，这个方法可能没什么问题，但只要你有更多元素，你就会注意到有很多指令用硬编码data1, data2是没有意义的。等等......在里面;即使您可以在控制器中使用简单的$watch来实现相同的结果而不使用指令。

相反，每次需要时都有一个指令可以重用，所以，我的方法是不设置新的范围，而是使用我们已有的范围;然后，由于data1和data2属于主输入模型，我创建了一个模板来保存它们。

希望这有帮助。 ; - ）

通过控制器检索指令范围？

1 个答案:

解释（？）：