在 angularjs 的指令中使用 `require`

Question

在 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 功能。发生这种情况的任何详细信息。谢谢

Answer 1

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

来自文档：

require

Require another directive and inject its controller as the fourth argument to the linking function.

— 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

suppose we have large number of functions, so we have to do this.addspeed = $scope.addspeed; everytime. Isn't there any shorter way?

如果您不需要 $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);    
            })
        }
    }
})

在 angularjs 的指令中使用 `require`

Using `require` in directives in angularjs

javascript

angularjs

angular-directive

require