AngularJS Link函数未被调用

时间:2015-08-26 14:10:03

标签: angularjs

由于某种原因,我的指令中的链接函数没有被调用。我可以看到我的指令是用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
                    }
                }
            };
        });
}

4 个答案:

答案 0 :(得分:4)

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;
&#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;
&#13;
&#13;

答案 1 :(得分:1)

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

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
}
});
通过这种方式,我认为你可以实现我希望。

答案 2 :(得分:1)

链接功能是否必须在指令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');
       };
     }

答案 3 :(得分:1)

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

    当一个指令使用这个选项(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
        }
    });