Question

标题有点满口，但目前情况如下：

我有一个指令（D1），它是我在根目录中的模式弹出窗口的简单标记。我有一个指令（D2），它在控制器的范围内（C1）。我想让D2在模态D1里面设置内容。我有一个服务（S1）注入C1，从我最终注入D1的网络中提取数据。

D1如下（模态的纯标记）： enter image description here

在C1中的S1将数据返回到D2以填充D1之后，

D1将如下所示。 D2将负责在D1中定义模型数据，例如{{title}}。 enter image description here

我们的想法是拥有一个通用的解耦模式（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：寻找另一个问题来帮助解决

Answer 1

哇哇哇哇！不确定我是否理解了所有这些，只是遵循Jonnybojandles评论......

你可以$broadcast和$on吗？

$rootScope.$broadcast('MyEvent'); // Fire an event

$scope.$on('MyEvent', function () {  });  // Handle the event

或者只是使用$rootScope？

Angularjs指令 - 指令 - 控制器 - 服务交互

1 个答案: