Question

我查看了许多关于“指令和控制器之间的通信”的问题和博客。他们中的大多数人真的很困惑我，我不知道他们是否适用于我。

我想：

   - 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：如何从指令中引用控制器

1 个答案: