角指令的链接功能不会被调用 [英] Angular directive's link function not being called

问题描述

我已经得到了与AngularJS指令链接功能的一个问题。这不是所谓的beeing，并不会引发任何错误。此外，在指令的回归模板不会渲染:(应该在哪里出问题了？谢谢你的答案！

  angular.module（'sampleApp.game'）。指令（'的GameCanvas'，函数（$喷油器）{
    的console.log（'指导工作'）; //这个工程，    功能li​​nkFn（范围，ELE，ATTRS）{
        的console.log（'Link功能犯规工作:('）; //但这不:(
    };    返回{
        范围： {}，
        模板：'＆LT; D​​IV CLASS =布拉布拉＆GT;＆LT; / DIV＆GT;，
        链接：linkFn
    }
}）;
 

我的HTML模板文件

 ＆LT; D​​IV CLASS =超大屏幕文本中心＆GT;
    ＆LT; H1＆GT;玩游戏＆LT;！/ H1＆GT;
    ＆所述p为H.; {{标语}}＆下; / P＆GT;
    ＆LT; D​​IV CLASS =游戏画布＆GT;＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

解决方案

默认情况下，指令是元素和属性（EA）而已。定义限制属性​​作为C。最佳做法是始终明确地定义它。

  angular.module（'sampleApp.game'）。指令（'的GameCanvas'，函数（$喷油器）{
的console.log（'指导工作'）; //这个工程，功能li​​nkFn（范围，ELE，ATTRS）{
    的console.log（'Link功能犯规工作:('）; //但这不:(
};返回{
    范围： {}，
    限制：'C'，//'EA'默认
    模板：'＆LT; D​​IV CLASS =布拉布拉＆GT;＆LT; / DIV＆GT;，
    链接：linkFn
}
 

}）;

由角记录在这里 - 的https://docs.angularjs.org/api/ng/service/$compile#directive-definition-object.

I've got a problem with AngularJS directive link function. It's not beeing called and it doesn't throw any error. Also the template in directive's return is not rendering :( Where should be problem? Thank you for answers!

angular.module('sampleApp.game').directive('gameCanvas', function($injector) {      
    console.log('Directive is working'); // this works,

    function linkFn(scope, ele, attrs) {
        console.log('Link function doesnt working :('); // but this not :(
    };

    return {
        scope: {},
        template: '<div class="blabla"></div>',
        link: linkFn
    }   
});

My html template file

<div class="jumbotron text-center">
    <h1>Play a game!</h1>
    <p>{{ tagline }}</p>   
    <div class="game-canvas"></div>
</div>

解决方案

By default, directives are for Element and Attribute ('EA') only. Define the restrict attribute as 'C'. Best practice is to always define it explicitly.

angular.module('sampleApp.game').directive('gameCanvas', function($injector) {      
console.log('Directive is working'); // this works,

function linkFn(scope, ele, attrs) {
    console.log('Link function doesnt working :('); // but this not :(
};

return {
    scope: {},
    restrict: 'C', //'EA' by default
    template: '<div class="blabla"></div>',
    link: linkFn
}   

});

Documented by Angular here - https://docs.angularjs.org/api/ng/service/$compile#directive-definition-object.

这篇关于角指令的链接功能不会被调用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！