javascript - 在angularjs的指令中使用`require`

在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);
            })
        }
    }
})