Use angular directive as attribute of custom directive
Question
I'm trying to edit this gentleman's fiddle ( http://jsfiddle.net/Wijmo/ywUYQ/ ) to add ng-click functionality to panes.
My goal is to add an ng-click function to the pane directive so when this is clicked the action specified runs.
Example:
<tabs>
<pane ng-repeat="candy in candies" title="Tasty {{candy.name}}" ng-click="addChocolate(candy)">
</tabs>
You will see in the snippet that the pane directive works by calling addPane in the tabs's controller adding itself to it's pane list. The tabs directive is responsible of handling the click event and showing the correct pane . So..... any ideas?
Here's a snippet as shown in the fiddle:
angular.module('components', []) .directive('tabs', function() { return { restrict: 'E', transclude: true, scope: {}, controller: ["$scope", function($scope) { var panes = $scope.panes = []; $scope.select = function(pane) { angular.forEach(panes, function(pane) { pane.selected = false; }); pane.selected = true; } this.addPane = function(pane) { if (panes.length == 0) $scope.select(pane); panes.push(pane); } } ], template: '<div class="tabbable">' + '<ul class="nav nav-tabs">' + '<li ng-repeat="pane in panes" ng-class="{active:pane.selected}">' + '<a href="" ng-click="select(pane)">{{pane.title}}</a>' + '</li>' + '</ul>' + '<div class="tab-content" ng-transclude></div>' + '</div>', replace: true }; }) .directive('pane', function() { return { require: '^tabs', restrict: 'E', transclude: true, scope: { title: '@' }, link: function(scope, element, attrs, tabsCtrl) { tabsCtrl.addPane(scope); }, template: '<div class="tab-pane" ng-class="{active: selected}" ng-transclude>' + '</div>', replace: true }; })
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <body ng-app="components"> <h3>BootStrap Tab Component</h3> <tabs> <pane title="First Tab"> <div>This is the content of the first tab.</div> </pane> <pane title="Second Tab"> <div>This is the content of the second tab.</div> </pane> </tabs> </body>
2 answers
solution1
1 2015-12-17 14:50:51
When your directive returns the HTML for your pane, ng-click=... isn't being compiled by Angular. You can use the $compile service to compile the pane directive's output HTML, so that Angular can register your callbacks as handlers for the onclick event.
The output HTML would be handled like this: $compile(html)(scope) , within a link function.
solution2
0 2015-12-17 14:49:18
You can try something like this :
.directive('pane', function() {
return {
require: '^tabs',
restrict: 'E',
transclude: true,
scope: {
title: '@',
paneClick: '=',
paneClickAttr: '='
},
link: function(scope, element, attrs, tabsCtrl) {
tabsCtrl.addPane(scope);
},
template: '<div ng-click="paneClick(paneClickAttr)" class="tab-pane" ng-class="{active: selected}" ng-transclude>' +
'</div>',
replace: true
};})
<pane title="First Tab" pane-click="addChocolate()" pane-click-attr="candy">
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.