在angular指令中使用require时出错。

这是我的html:

<!doctype html>

<html ng-app="myApp">
    <head>
        <title>Page Title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="initial-scale=1.0">
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script src="app.js"></script>
    </head>

    <body>
        <superman speed>This is a superhero</superman>
    </body>
</html>


我的应用是:

var myApp=angular.module('myApp',[]);

myApp.directive('superman',function(){

    return{
        restrict:'E',
        controller:function($scope){
            $scope.abilities=[];

            $scope.addspeed=function(){
                $scope.abilities.push('Speed');
            }

        },
        link:function(scope,element,attrs){
            element.bind('mouseenter',function(){
                console.log(scope.abilities);
            })
        }
    }
})

myApp.directive('speed',function(){
    return {
        require:'superman',
        link:function(scope,element,attrs,supermanCtrl){
            supermanCtrl.addspeed();
        }
    }
})


我得到的错误是supermanCtrl.addspeed()不是函数。
我还记录了我的supermanCtrl,它不包含addspeed函数。为什么会发生这种情况的任何细节。
谢谢

最佳答案

$compile Service将控制器的this上下文作为链接函数的第四个参数注入。它不会注入$scope对象。

从文档中:


  要求
  
  需要另一个指令并将其控制器作为链接函数的第四个参数注入。
  
  — AngularJS Comprehensive Directive API Reference (require)


使用指令控制器的this上下文定义控制器方法:

angular.module("myApp").directive('superman',function(){

    return{
        restrict:'E',
        controller:function($scope){
            $scope.abilities=[];

            $scope.addspeed=function(){
                $scope.abilities.push('Speed');
            }
            //-------------------------------
            //USE `this` context
            this.addspeed = $scope.addspeed;
            //-------------------------------
        },
        link:function(scope,element,attrs){
            element.bind('mouseenter',function(){
                console.log(scope.abilities);
            })
        }
    }
})




myApp.directive('speed',function(){
    return {
        require:'superman',
        link:function(scope,element,attrs,supermanCtrl){
            supermanCtrl.addspeed();
        }
    }
})


DEMO on PLNKR




  假设我们有很多函数,所以我们必须这样做。addspeed = $ scope.addspeed;每次。有没有更短的方法?


如果不需要$scope上的函数,只需直接绑定到this属性:

angular.module("myApp").directive('superman',function(){

    return{
        restrict:'E',
        controller:function($scope){
            $scope.abilities=[];

            //$scope.addspeed=function(){
            //BIND directly to the `this` property
            this.addspeed = function() {
                $scope.abilities.push('Speed');
            }
        },
        link:function(scope,element,attrs){
            element.bind('mouseenter',function(){
                console.log(scope.abilities);
            })
        }
    }
})

09-30 16:40