Question

我的输入指令从html获取输入值，并更新角度模型：

.directive('input', function($parse) {
  return {
    restrict: 'E',
    require: '?ngModel',
    link: function(scope, element, attrs) {
      if (attrs.ngModel && attrs.value) {
        $parse(attrs.ngModel).assign(scope, attrs.value);
      }
    }
  };
});

然后我的html具有html值和角度模型绑定：

  <div ng-controller="form" class="form">
    <h2>Form with controller</h2>
    <input type="text" ng-model="item.example" value="defaultValue">
    <button ng-click="checkValue()">Check value</button>
  </div>

当我将测试作为控制器运行时，它可以完美地运行：

.controller('form', function($scope) {
  $scope.item = {};
  $scope.checkValue = function() {
    console.log('checkValue', $scope.item);
  };
})

但作为嵌套指令，它没有得到值：

.directive('form', function() {
  return {
    restrict: 'C',
    link: function(scope, element, attrs) {
      scope.item = {};
      scope.checkValue = function() {
        console.log('checkValue', scope.item);
      };
    }
  };
})

我的猜测是指令范围是分开的，所以一个指令不影响另一个指令，但是它与controller +指令一起工作正常吗？

我尝试使用此处的建议更改指令范围： Why are my AngularJS directives sharing scope?

.directive('input', function($parse) {
  return {
    restrict: 'E',
    require: '?ngModel',
    scope: true,
    link: function(scope, element, attrs) {
      if (attrs.ngModel && attrs.value) {
        $parse(attrs.ngModel).assign(scope, attrs.value);
      }
    }
  };
});

但是不能让两个指令共享相同的范围。这可能吗？

以下是我的演示，展示了两种方法： https://jsfiddle.net/kmturley/L1bky0g0/1/

Angular嵌套指令范围不共享

0 个答案: