Question

使用angular-ui-bootstrap动态创建选项卡，使用指令我可以为选项卡制作模板并使用ng-include加载其中的内容。现在我的要求是当我单击选项卡中的刷新按钮时重新加载此内容报头中。

tabsApp.directive('apptabs', function () {
    return {
            restrict:"E",
            scope:{
                tablist:'=',
                ondelete:'&'
            },
            templateUrl:"././static/jslib/appTemplate/tabs-directive.html",
            controller:function ($scope, $attrs) {
                $scope.deleteTab = function (id) {
                    $scope.ondelete({id:id});
                }

            }
        };
    })

标签模板

<tabset>
  <tab ng-repeat="tab in tablist"
        heading="{{tab.title}}" active="tab.active" disabled="tab.disabled">
    <tab-heading>
    <i class="{{tab.iconCls}}"></i>
      {{tab.title}}
      <a class="button small" ng-click="deleteTab(tab.id)" href='' ><strong>x</strong></a>
      <a class="button small"  href='' ><strong>refresh</strong></a>
    </tab-heading>
     <ng-include src="tab.page"></ng-include>
  </tab>
</tabset>

任何想法？

Answer 1

处理页面刷新。我认为您需要使用service来暂停当前有效标签，或者您需要在网址中添加额外参数，并在用户点击标签时继续更改。

Answer 2

我做到了这一点。您需要一个返回当前活动选项卡的函数：

 $scope.active = function () {
        return $scope.tabs.filter(function (tab) {
            return tab.active;
        })[0];
    };

然后我有一个调用刷新功能的按钮：

<button ng-click="refresh()" class="pull-right btn btn-success">Refresh</button>

然后所有resfesh函数必须重新绑定当前活动选项卡的数据：

 $scope.refresh = function () {
        var activetab = $scope.active();

       //call web service here or whatever to
       //get tab contents passing current active tab then bind result
       //to any scope binding that you have for the current tab

       $scope.tabcontent = results; //etc...
    };

希望这是有道理的。

刷新角度ui中的选项卡

2 个答案: