CODEWITHSUNDEEP
javascriptangularjsangularjs-directive
MichaelWClark
MichaelWClark

Reputation: 390

Angular Directive not showing in ng-Switch

I have 4 templates being shown based upon var.type. I have 2/4 showing properly, but for some reasons 2 of them are not rendering anything. In the HTML I see the switch being properly activated, but the directive isn't being placed inside as expected.

angular.module('lodgicalWebApp');

angular.module('lodgicalWebApp')
  .directive('lodReportVariableCgflookup', function () {
    return {
      template: '{{var.name}}<label for="repeatSelect"> {{var.name}} </label> \
    			<select name="repeatSelect" ng-model="Vars[var.name]" id="repeatSelect" ng-model="data.repeatSelect"> \
      				<option ng-repeat="option in  var.possibleVals" value="{{option.id}}">{{option.name}}</option> \
    			</select>',
      restrict: 'EA'
    };

  });


angular.module('lodgicalWebApp')
  .directive('lodReportVariableBoolean', function () {
    return {
      template: '{{var.name}}<input ng-model="Vars[var.name]" type="checkbox" ng-true="{{var.value}}">',
      restrict: 'EA',
      
    };
  });


angular.module('lodgicalWebApp')
  .controller('ReportsCtrl', function ($scope,  $routeParams, LodgicalReportService,  Report) {
    $scope.selectedReport.variables = [
      {name: "Start Date",possibleVals:[],type: "Date", value: "2016-01-18"},
      {name: "Operator",possibleVals: [{id:1,name:"test"},{id:2,name:"thanksStackOverflow"}], type: "CfgLookup"},
      {name: "Include Security Deposits", type: "Boolean", value: "False"}
    ]
  
  });
			<div ng-repeat="var in selectedReport.variables">
				<div ng-switch="var.type">
                     <!-- CfgLookup not rendering -->
					<div ng-switch-when="CfgLookup" data-lod-report-variable-cfglookup ></div>
					<div ng-switch-when="Boolean" data-lod-report-variable-boolean></div>
					<div ng-switch-when="Date" data-lod-report-variable-date ></div>
					<div ng-switch-when="CfgLookup-Multi" data-lod-report-variable-cfglookup></div>


				</div>
			</div>

This isn't a functioning example, but it should illustrate enough to hopefully shine some light on this major frustration.

Thanks in advance.

Upvotes: 2

Views: 204

Answers (1)

code2b
code2b

Reputation: 142

You have a typo that would surely mess it up:

"data-lod-report-variable-cfglookup" is what you wrote in the HTML code as the directive name, while the directive name in your JS code is "lodReportVariableCgflookup". (cfglookup vs cgflookup)

EDIT: In addition, I noticed that you used the same directive "lodReportVariableCgflookup" on both the directives that you say are not working.

It's possible you have another issue as well, but I'd start with that one :)

Upvotes: 2

Related Questions