Question

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

我的指示：

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>

默认情况下，我想加载“SALES”视图，然后点击单位或库存，然后在我的指令标签中加载该内容

<headline-views></headline-views>

有人可以帮我这个，我是棱角分明的新人。

Answer 1

我不确定你要找的是什么，为了澄清，我还无法评论，但我觉得你可能正在寻找的是有角度的ui路由器。< / p>

这是一个非常扎实的youtube教程，它帮助了我：https://www.youtube.com/watch?v=QETUuZ27N0w

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

通过导航栏在角度指令上加载不同的视图

1 个答案: