將變量傳遞給指令中的動態控制器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。