javascript - AngularJS dynamic custom directive issue -
my custom directive runs fine onload page load when added using append not run properly. not show content when @ in runtime.
html:
<!doctype html> <html lang="en" ng-app="module1"> <head> <meta charset="utf-8"> <title>angular demo</title> <link rel="stylesheet" href="css/bootstrap.css"> <script src="js/angular.js"></script> <script src="js/ui-bootstrap-tpls-0.13.0.js"></script> <script src="js/app.js"></script> </head> <body> <div id="divcontainer" style="border-style: solid;border-color:red;" ng-controller = "controller1 cnt1" > <button ng-click="clicked();">click me!!</button> <wlaccordion></wlaccordion> </div> </body> </html> app.js:
var app = angular.module('module1',[]); app.controller('controller1', ['$scope', function($scope) { $scope.authordata = authorinfo; $scope.clicked = function () { alert('clicked'); //angular.element(document.getelementbyid('divcontainer')).append('<wlaccordion1></wlaccordion1>' (scope)); angular.element(document.getelementbyid('divcontainer')).append('<wlaccordion></wlaccordion>'); } }]);//controller1 var authorinfo = [ { 'name': 'ray', 'rate': '10', 'show': 'true' }, { 'name': 'mahesh', 'rate': '12', 'show': 'true' } ] app.directive("wlaccordion", function($compile) { var template = '<div ng-controller = "controller1 cnt1">' + '<div ng-repeat="adata in authordata" ng-init="tab = 1">' + '<ul>' + '<li>' + '<h1 ng-show={{adata.show}} ng-class="{active: tab === 1}"> {{adata.name}} </h1>' + '<h1 ng-show={{adata.show}} ng-class="{active: tab === 2}"> {{adata.rate | currency}} </h1>' + '</li>' + '</ul>' + '</div>' + '</div>'; return{ link: function(scope, element){ var content = $compile(template)(scope); element.append(content); } } }); i directive function same onload.
-thanks mahesh
angularjs intended separation of presentation logic , business one. think should in angular way, current approach more jquery one.
i suggest add accordions collection controller:
app.controller('controller1', ['$scope', function($scope) { $scope.accordions = [0]; // replace 0 actual data $scope.clicked = function() { $scope.accordions.push($scope.accordions.length); // same here }; // other code } and in html add ng-repeat:
<div id="divcontainer" style="border-style: solid;border-color:red;" ng-controller = "controller1 cnt1" > <button ng-click="clicked();">click me!!</button> <wlaccordion ng-repeat="accordion in accordions"></wlaccordion> </div> edit: don't forget remove compilation wlaccordion's link.
edit #2: suppose authorinfo global var used example, if doesn't consider usage of module.constant or module.value
Comments
Post a Comment