AngularJS Link函数未被调用

发布时间：2020-12-17 17:44:06 所属栏目：安全来源：网络整理

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

由于某种原因,我的指令中的链接函数没有被调用.我可以看到我的指令是用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',replace: true,templateUrl: 'FormTest/views/ji-Tabset.html',controller: function ($scope) {
                    var tabPanelItems = $scope.tabPanelItems = [];
                    $scope.tabSettings = {
                        dataSource: tabPanelItems
                    }
                }
            };
        });
}

解决方法

module FormTest {
    angular
        .module('FormTest') //Gets the FormTest Module
        .directive('jiTab',//<-- 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选项通常设置为：

>’A’ – 仅匹配属性名称
>’E’ – 仅匹配元素名称
>’C’ – 仅匹配类名
可以根据需要组合这些限制：

‘AEC’ – 匹配属性或元素或类名

错误3

你的jiTabset指令中没有ng-transclude属性,请确保你有’FormTest / views / ji-Tabset.html’

Worknig演示

打开浏览器控制台

angular.module('FormTest',[]);
angular.module('FormTest') //Gets the FormTest Module
        .directive('jiTabset',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,controller) {
                console.log('Link is called');
            };
            return {
                require: '^jiTabset',restrict: 'E',link: linkFn
            }
        });

<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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!