Angularjs: 如何从指令中引用控制器

Question

我查看了很多关于 "communicating between directives and controllers" 的问题和博客。他们中的大多数真的让我感到困惑，我根本不知道他们是否适用于我。

我要：

   - to keep ng-controller in my html 
   - to avoid putting everything on $scope (ie. to use "controller as")
   - to prevent my controller from firing twice 
   - to send a method of a local-scope controller 
          to a method of another-scope controller.

如果我在指令中包含对本地范围控制器的引用，我已经让它工作了。但随后它强制该控制器 被实例化两次 .

那么如何干净地获取与控制器在同一本地范围内的指令以引用该控制器内的方法？

查看我的 plunker

<head> <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"> </script> <script> angular.module( "my_app" , [] ) .controller( "A_controller" , function( $scope ) { $scope.A_method = function( argf ) { argf.apply( null) ; } ; } ) .controller( "B_controller" , function( $scope ) { console.log( "B initiated" ) ; // FIRES TWICE if directive includes 'controller:"B_controller"' var B_this = this ; //$scope.B_method = function() { alert( "GOAL" ) ; } ; B_this.B_method = function() { alert( "GOAL" ) ; } ; } ) .directive( "bDirective" , function() { return { controller : "B_controller" , link : function( scope , element , atts , ctrl ) { //scope.A_method( scope.B_method ) ; // SUCCEEDs, // ... if B_method is on $scope // ... but I understand that // ... 'controller as ...' is better scope.A_method( ctrl.B_method ) ; // SUCCEEDS, // ... if I include // ... 'controller:"B_controller"' // ... but that fires the // ... "B_controller" twice } } } ) </script> </head> <body ng-app = "my_app" ng-controller = "A_controller" > <div ng-controller = "B_controller as B_this"> <div b-directive> </div> </div> </body>

Answer 1

我通过做两件事解决了我的问题，而不是做我在其他帖子中多次看到的一件事。

参见 my plunker ...

//DO:
//- in html ................. use "controller as your_prop" 
//- in directive link ....... use scope.your_prop to access the controller 

//DON'T DO:
//- in directive's return ... DON'T use 'controller' or 'controller as' properties.

<!DOCTYPE html>

<html>

  <head>
    <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
    <script>
      angular.module( "my_app" , [] )
        .controller( "A_controller" , 
                     function( )
                       { var myA   = this  ;
                         myA.propA = "foo" ;
                       }
                    )
        .controller( "B_controller" , 
                     function( )
                       { var myB   = this  ;
                         myB.propB = "bar" ;                      
                       } 
                   )
        .directive( "bDirective" , 
                    function()
                       { return { //controller   : "B_controller" , // !!!! DON'T NEED THIS  
                                  link : function( scope , element , atts )  
                                           { var lvs_A = scope.A_this.propA ;  
                                             var lvs_B = scope.B_this.propB ;

                                             var lvo_root    = scope.$parent         ;
                                             lvo_root.output = lvs_A + " , " + lvs_B ;
                                           }
                                } 
                       }
                   )
    </script>
  </head>

  <body ng-app        = "my_app"
        ng-controller = "A_controller as A_this" >

    <div ng-controller = "B_controller as B_this">
      <div B_directive>
      </div>
    </div>
    <div>output: {{output}}</div>
  </body>

</html>

Angularjs: 如何从指令中引用控制器

Angularjs: How to reference controller from within directive

controller

communication

angularjs

angularjs-directive