标题有点拗口但是有我现在的情况:
我有一个指令 (D1),它是我在根目录中的模态弹出窗口的普通标记。我有一个指令 (D2) 在控制器的范围 (C1) 中。我想让 D2 设置模态 D1 内的内容。我有一个服务(S1),它被注入到 C1 中,它从网络中提取我想最终注入到 D1 中的数据。
D1 如下(模态的普通标记):
在 C1 中的 S1 将数据返回给 D2 以填充 D1 后,D1 将如下所示。D2 将负责在 D1 中定义模型数据,例如 {{title}}。
这个想法是有一个通用的解耦模式(D1),可以通过另一个指令(D2)定义/填充。
我很难实现这个功能。加分项,我希望 D1 有一个 API,我可以调用它来使用复选框、输入、文本等不同元素填充模式。这与仅在 D1 之外构建标记然后将其完全注入 D1 不同。
基本代码如下:
myApp.controller('C1', function(S1){
var results = S1.query();
// populate D1 attributes with results from S1? or a getter function in the controller to returns results to D1.
}
myApp.directive('D1', function() {
var createCheckBox = function( name ){ // one of many different element available exposed through D1's API.
var checkbox = document.createElement('input');
checkbox.type = 'checkbox';
checkbox.name = name;
return checkbox;
}
return{
restrict: "E",
templateUrl: '/path/to/my/modal.html',
controller: function( $scope ){ // hopefully this would be D1's API
$scope.modalContent = [];
this.addCheckBox = function( checkboxName ){
$scope.push( this.createCheckBox( checkboxName ) );
}
}
link: function( scope, element, attrs ){
// set up events on the modal (such as closing it)
}
}
} // end of D1
myApp.directive('D2', function() {
return{
restrict: "A",
require: 'D1', // <-- do not think this is possible with my setup.
link: function( scope, element, attrs ){
element.bind( 'click', function(){
// loop through data returned by service
D1.addCheckBox(/* checkbox's name */ );
// end loop
});
}
}
}// end of D2
HTML 标记
<div ng-controller="root">
<div ng-controller="C1">
<span D2></span>
</div>
<D1></D1>
</div>
感谢您关注这么远!
TL;DR:寻找另一个问题来帮助解决