错误1

Question

由于某种原因，我的指令中的链接函数没有被调用。我可以看到我的指令是用console.log而不是链接函数调用的。也不介意我将使用我的父指令的控制器参数。我也试过限制：'E'也没有运气。我没有在这个例子中使用它。不知道是什么导致它跳过链接。有什么想法吗？

module FormTest {
    angular
        .module('FormTest') //Gets the FormTest Module
        .directive('jiTab', function () {
            console.log('directive was hit');
            function linkFn(scope, ele, attrs, controller) {
                console.log('Link is called');
            };
            return {
                require: '^ji-Tabset',
                restrict: 'C',
                transclude: true,
                link: linkFn
            }
        });
 }

HTML

<ji-form name="Main Form">  
    <ji-tabset name="Tabs">  
        <ji-tab tab-name="General"></ji-tab>  
        <ji-tab tab-name="Stats"></ji-tab>  
    </ji-tabset>  
</ji-form>

家长指示

module FormTest {
    angular
        .module('FormTest') //Gets the FormTest Module
        .directive('jiTabset', function () {
            return {
                restrict: 'E',
                transclude: true,
                replace: true,
                templateUrl: 'FormTest/views/ji-Tabset.html',
                controller: function ($scope) {
                    var tabPanelItems = $scope.tabPanelItems = [];
                    $scope.tabSettings = {
                        dataSource: tabPanelItems
                    }
                }
            };
        });
}

Answer 1

module FormTest {
    angular
        .module('FormTest') //Gets the FormTest Module
        .directive('jiTab', function () {
            console.log('directive was hit');
            function linkFn(scope, ele, attrs, controller) {
                console.log('Link is called');
            };
            return {
                require: '^ji-Tabset', //<-- this must be `^jiTabset` read mistake 1
                restrict: 'C', //<-- this must be `E` which stands for element, (jiTab) C is for class, read mistake 2
                transclude: true,
                link: linkFn
            }
        });
 }

来自docs

错误1

规范化 Angular规范化元素的标记和属性名称，以确定哪些元素与哪些指令匹配。我们通常通过其区分大小写的camelCase规范化名称（例如ngModel）来引用指令。但是，由于HTML不区分大小写，我们通过小写形式引用DOM中的指令，通常使用DOM元素上的划线分隔属性（例如ng-model）。

规范化过程如下：

从元素/属性的前面剥离x-和数据。
将：， - 或_分隔的名称转换为camelCase。

错误2

restrict选项通常设置为：

＆＃39; A＆＃39; - 仅匹配属性名称
＆＃39; E＆＃39; - 仅匹配元素名称
＆＃39; C＆＃39; - 只匹配类名这些限制都可以根据需要合并：

＆＃39; AEC＆＃39; - 匹配属性或元素或类名

错误3

您的ng-transclude指令中没有jiTabset属性，请确保您拥有'FormTest/views/ji-Tabset.html'

Worknig演示

打开浏览器控制台

＆＃13;

angular.module('FormTest', []);
angular.module('FormTest') //Gets the FormTest Module
        .directive('jiTabset', function () {
            return {
                restrict: 'E',
                transclude: true,
                replace: true,
                template: '<div>ji-tabset<div ng-transclude></div></div>',
                controller: function ($scope) {
                    var tabPanelItems = $scope.tabPanelItems = [];
                    $scope.tabSettings = {
                        dataSource: tabPanelItems
                    }
                }
            };
        });
angular.module('FormTest') //Gets the FormTest Module
        .directive('jiTab', function () {
            function linkFn(scope, ele, attrs, controller) {
                console.log('Link is called');
            };
            return {
                require: '^jiTabset',
                restrict: 'E',
                transclude: true,
                link: linkFn
            }
        });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.js"></script>
<div ng-app="FormTest">
  <ji-form name="Main Form">  
    <ji-tabset name="Tabs">  
        <ji-tab tab-name="General"></ji-tab>  
        <ji-tab tab-name="Stats"></ji-tab>  
    </ji-tabset>  
</ji-form>
</div>

＆＃13;

Answer 2

通过将变量赋值给函数并通过变量名称调用它，

angular
.module('FormTest') //Gets the FormTest Module
.directive('jiTab', function () {
 var linkFn = function (scope, ele, attrs, controller) {
    console.log('Link is called');
};
return {
    restrict: 'C',
    transclude: true,
    link: linkFn
}
});

通过这种方式，我认为你可以实现我希望。

Answer 3

链接功能是否必须在指令ITSELF之外生效？

试试这个：

       module FormTest {

       angular
       .module('FormTest') //Gets the FormTest Module
       .directive('jiTab', function () {
           console.log('directive was hit');
           return {
               require: '^jiTabset',
               restrict: 'E',
               transclude: true,
               link: linkFn
           }
       });

       function linkFn(scope, ele, attrs, controller) {
           console.log('Link is called');
       };
     }

Answer 4

您正在将该指令用作元素，因此您必须将restrict属性值更改为“E”。
jiTabSet指令中没有控制器，因此不需要在jiTab指令中要求该指令。更多信息：https://docs.angularjs.org/guide/directive#creating-directives-that-communicate

当一个指令使用这个选项（require）时，$ compile将抛出一个除非找到指定的控制器，否则出错。 ^前缀表示该指令在其父项上搜索控制器（没有^前缀，指令将查找控制器只是它自己的元素。）

更新你的指令：

.directive('jiTab', function () {
    console.log('directive was hit');
    function linkFn(scope, ele, attrs) {
        console.log('Link is called');
    };
    return {
        restrict: 'E',
        transclude: true,
        link: linkFn
    }
});

AngularJS Link函数未被调用

4 个答案:

错误1

错误2

错误3

Worknig演示