Question

根据传递给它的变量 type ，我得到了加载不同模板的指令。我也将变量患者和服务转移到指令的孤立范围。

.directive('serviceCharts', serviceCharts);

function serviceCharts() {
  return {
    restrict: 'E',
    link: function (scope, element, attrs) {
      if(attrs.type) {
         scope.template = 'views/' + type + '.html';
    }
    attrs.$observe('type', function (type) {
      if(attrs.type) {
        scope.template = 'views/' + type + '.html';
      }
    });
  },
  template: '<div ng-include="template"></div>',
  scope:{
    patient:'=',
    service:'='
  }
};

}

在模板（例如views / myservice.html）中，我加载控制器：

 <div ng-controller="myCtrl as vm"> 
     VIEW
 </div>

在控制器（myCtrl）中，访问以患者和服务：

  service = $scope.$parent.$parent.service;
  patient = $scope.$parent.$parent.patient;

这很好用，但我不喜欢这种通过$ parent。$ parent访问变量的方式。这也搞砸了我的测试。

还有其他（更好）的方法吗？

谢谢！

Answer 1

您可以为patient＆amp;创建一个包装器对象。 service属性。这可以命名为model＆amp;然后将该模型对象提供给您的指令。

然后，当前方法的问题是ng-include为其创建的template创建子范围。因此，当您传递原始类型对象绑定到指令时，如果要更改子范围中的任何子原始类型绑定。它失去了一个约束，这就是为什么倾向于使用$parent.$parent符号完全绑定到原始源对象的原因。

$scope.model = {
  patient:'My Patient',
  service:'My Service'
};

通过制作上述对象结构，您将确保关注Dot Rule。使用Dot Rule将避免$parent.$parent显式范围注释。

指令范围绑定将更改为

scope:{
   model:'='
}

指令用法如下所示

<service-charts type="{{'sometype'}}" model="model"></service-charts>

除了点规则之外的另一种替代方案是这种与范围相关的问题，遵循controllerAs模式。但是，当您要使用scope与controllerAs隔离时，您应该将bindToController: true选项设置为true，以确保将所有scope合并到控制器上下文中。

scope:{
    patient:'=',
    service:'='
},
controllerAs: '$ctrl',
bindToController: true

然后在每个指令范围变量之前使用$ctrl。

Answer 2

是的，有更好的方法可以做到这一点。您应该使用services并在这些服务中存储变量（在您的情况下，您应该创建一个用于存储数据的工厂）。然后，您可以注入这些服务并访问其数据。

<强>旁注：您可以在指令中使用{ ..., controller: 'controllerName', controllerAs: 'vm' }语法，这样就不需要在html中声明这些语法。

将变量传递给Directive AngularJS中的动态控制器

2 个答案: