How to change template URL at runtime in AngularJS? -
i have in app.js
var app = angular.module('plunker', []); app.controller('mainctrl', function($scope) { // fetch data api calls var empdept = getemployeedata(); var marfin = getfinancedata(); var x = 1; $scope.list = {}; switch(x) { case 1: $scope.list = { employeedepartment: empdept }; break; case 2: $scope.list = { marketingfinance: marfin };break; } }); app.directive('mycustomer', function() { return { restrict: 'ae', scope: { customer: '=mycustomer' }, replace: true, templateurl: 'empdept.html' } }; }); and index.html under
<!doctype html> <html ng-app="plunker"> <head> <meta charset="utf-8" /> <title>angularjs plunker</title> <script>document.write('<base href="' + document.location + '" />');</script> <script data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js" data-require="angular.js@1.3.x"></script> <script src="app.js"></script> </head> <body ng-controller="mainctrl"> <label ng-repeat="(key,val) in list"> <div ng-if="key === 'employeedepartment'"> <table border="1"> <tr> <td><b>employeenames</b></td> </tr> <tbody> <tr ng-repeat="customer in val" my-customer="customer"></tr> </tbody> </table> <script type="text/ng-template" id="empdept.html"> <tr> <td>{{customer.empname}}</td> </tr> </script> </div> <div ng-if="key === 'marketingfinance'"> <table border="1"> <tr> <td><b>product name</b></td> <td><b>price</b></td> </tr> <tbody> <tr ng-repeat="customer in val" my-customer="customer"></tr> </tbody> </table> <script type="text/ng-template" id="markfin.html"> <tr> <td>{{customer.productname}}</td> <td>{{customer.price}}</td> </tr> </script> </div> </label> </html> now problem that
depending on value of switch case, templateurl has changed.
e.g
if x=1, templateurl = empdept.html
if x=2, templateurl = markfin.html
can please tell how it?
n.b.~ have seen this not plug application. other easy way?
i have added plunker allows dynamically change template url
http://plnkr.co/edit/yg5qebforyynncdvdooy?p=preview
you must add variable stores html link directive scope can see below:
app.directive('mycustomer', function() { return { restrict: 'ae', scope: { customer: '=mycustomer', templatehtml: "=" }, replace: true, template: '<div ng-include="templatehtml"></div>', link: function(scope, element, attrs) { } }; });
Comments
Post a Comment