CODEWITHSUNDEEP
javascriptangularjsangularjs-directive
kennechu
kennechu

Reputation: 1422

Load different views on angular directive through a navigation bar

I have a directive that loads three html files and I want to display that content inside my main view and switch beetwen this views across a nav bar but I dont know how to achive this.

My directive:

angular.module('headlinereport.Views', [])
.directive('headlineViews', function ($filter,
                                  $timeout,
                                  configFactory,
                                  datafactory,
                                  localStorageFactory,
                                  $interpolate,
                                  searchFactoryDropdown,
                                  queryStringFactory,
                                  $compile,
                                  $location,
                                  $parse) {
    return {
        restrict: 'E',
        transclude: true,

        link: function (scope, element, attrs, vm) {
            //need to get url from the core services that is been built
            scope.url = {
                'site': queryStringFactory.site(),
                'country': queryStringFactory.country()
            };


            // Function call to the Template of ScatterPlot Chart to Plot the Data in UI notation
           scope.getContentURL = function (value) {

                if(value === "salesView") {
                   return "../../directives/salesView.html";
                } else if (value === "unitsView") {
                   return "../../directives/unitsView.html";
                } else if(value === "inStockView") {
                   return "../../directives/inStockView.html";
                }
            };

        },
        template: '<ng-include src="getContentURL()"></ng-include>',
    };
});

and this is my navigation bar:

      <div class="btn-group">
         <button class="btn btn-primary" type="button">Sales</button>
         <button class="btn btn-white" type="button">Units</button>
         <button class="btn btn-white" type="button">In-Stcok</button>
     </div>

By default I want to load "SALES" view and then be able to click on units or in Stock and then load that content inside my directive tag 

<headline-views></headline-views>

Can someone help me on this, I'm new to angular.

Upvotes: 0

Views: 275

Answers (1)

Johnny Welker
Johnny Welker

Reputation: 114

I'm not exactly sure what you're looking for, and I can't comment yet in order to clarify, but I feel like what you might be looking for is angular ui router.

Here's a really solid youtube tutorial that helped me: https://www.youtube.com/watch?v=QETUuZ27N0w

Ui Router allows you to assign states to multiple html files and load them. Remember to include the dependendcy ui- router in your module and add the ui-router specific script.

Upvotes: 1

Related Questions