在子指令中隔离ng-model

Question

我正在寻找创建一个由小功能块构建的表单的最佳解决方案。

我实际做了什么：

主控制器加载对象并将其传递给指令：

$scope.context= {model object};
<form><employee-context ng-model="context"></form>

employeeContext指令它拥有使用另一个指令构建的模板（这就是我所说的小功能块）：

<base-section ng-model="baseModel"></base-section>
<address-section ng-model="addressModel"></address-section>
<details-section ng-model="detailsModel"></details-section>

employeeContext链接功能：

link: function(scope, elem, attrs, ngModel) {
  ngModel.$render = function() {
    scope.model = ngModel.$modelValue; //this is main model
    if (scope.model) {
      scope.baseModel = {
        name: scope.model.name,
        photoKey: scope.model.photoKey
      };
      scope.addressModel = scope.model.addresses;
      scope.detailsModel = scope.model.details;
    }
  };

  scope.$watch('addressModel', function(newVal, oldVal) {
    if (newVal !== oldVal){
      scope.model.addresses = newVal;
      ngModel.$setViewValue(scope.model);
    }

  });

  scope.$watch('detailsModel', function(newVal, oldVal) {
    if (newVal !== oldVal){
      scope.model.details = newVal;
      ngModel.$setViewValue(scope.model);
    }
  });
}

以上代码是我简化构建新上下文指令的解决方案。每次开发人员想要创建新的上下文时，他必须创建类似的指令，拆分模型并设置自己的html模板。但是这个解决方案存在一些我不知道如何解决的问题。

问题：

我预计每个指令中的ng-model将彼此隔离。但事实并非如此。 这意味着较低级别指令内的每个更改都会自动传播到主模型。我想避免这种行为并仅通过调用ngModel.$setViewValue(updatedModel)更新主模型（例如仅在按钮点击后）。

功能块代码示例：

link: function(scope, elem, attrs, ngModel) {
  ngModel.$render = function() {
    scope.adr = ngModel.$modelValue;
  };

  scope.updateModel = function(){
    _.each(scope.adr,function(m){
      m.city = m.city.toUpperCase();
    });
    ngModel.$setViewValue(scope.adr);
  };
}

我也很困惑为什么这个在上下文链接函数中的监视仅在初始化时被触发一次。它们不会对以后的模型更改做出反应。

我的问题是： 什么是创建一些隔离范围的最佳解决方案，模型传递为ngModel，并且只能按需更新此模型。

这是plunkr http://plnkr.co/edit/vBUCwQHOT6GDDfJLNN5N?p=preview