javascript - 通过导航栏加载 Angular Directive(指令)的不同 View

Question

我有一个加载三个 html 文件的指令，我想在主视图中显示该内容，并在导航栏上切换此 View ，但我不知道如何实现这一点。

我的指令:

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>',
    };
});

这是我的导航栏:

      <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>

默认情况下，我想加载“销售” View ，然后能够单击单位或库存，然后将该内容加载到我的指令标签内

<headline-views></headline-views>

有人可以帮助我吗，我是 Angular 新手。

Answer 1

我不太确定你在寻找什么，我还不能发表评论来澄清，但我觉得你可能正在寻找的是 Angular ui 路由器。

这是一个非常可靠的 YouTube 教程，对我很有帮助:https://www.youtube.com/watch?v=QETUuZ27N0w

Ui Router 允许您为多个 html 文件分配状态并加载它们。请记住在模块中包含依赖项 ui-router 并添加 ui-router 特定脚本。