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

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

}

在模板（视图/ 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

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

旁注： 您可以使用{ ..., controller: 'controllerName', controllerAs: 'vm' }语法在你的指令，所以你不需要申报那些在你的HTML。

Answer 2

您可以为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模式。但是，因为您要使用独立的scope和controllerAs，您应该将bindToController: true选项设置为true，以确保将所有scope合并到控制器上下文中。

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

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