将变量传递到指令Angularj内部的动态控制器

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:'='
  }
};

}

在模板中

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

和控制器（myctrl）i 访问对患者和服务此方式：

  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>

---

---

与DOT规则以外的另一种选择相关问题是遵循controllerAs模式。但是，当您将使用controllerAs使用隔离的scope时，您应该将bindToController: true选项正确为true，以确保所有scope合并到控制器上下文中。

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

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

Answer 2

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

sidenote：您可以在指令中使用{ ..., controller: 'controllerName', controllerAs: 'vm' }语法，因此您无需在HTML中声明这些语法。