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