将变量传递给指令AngularJS中的动态Controller

Question

我得到了一个指令，该指令根据传递给它的变量类型 加载不同的模板 。 我也将变量耐心和服务传递给指令的隔离范围。

.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和service属性创建包装对象。 可以将其命名为model ，然后将该模型对象提供给您的指令。

然后，当前方法的问题是， 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模式。 但是接下来，您bindToController: true controllerAs使用隔离scope ，因此应将bindToController: true选项设置为true，以确保将所有scope合并到控制器上下文中。

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

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

Answer 2

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

旁注：您可以在指令中使用{ ..., controller: 'controllerName', controllerAs: 'vm' }语法，因此您无需在html中声明它们。