Question

我已经使用ng-repeat显示了动态标签菜单，我想获得每个标签的个人网址是否可以获取网址？如果是这样我怎么能处理这条路线。我认为由于动态标签内容而无法设置路线，是否还有其他可用选项？

Answer 1

它只是一个小补丁，在实际应用中，我建议使用ng-route或ui-router。

将url属性添加到标签

$scope.tabs = [
  { url: "/tab/1" , title:"Tab 1", content:"Dynamic content 1" },
  { url: "/tab/2" , title:"Tba 2", content:"Dynamic content 2" },
  { url: "/tab/3" , title:"Tab 3", content:"Dynamic content 3" },
  { url: "/tab/4" , title:"Tab 4", content:"Dynamic content 4" }
];

我创建了一个指令：

根据有效标签更改位置（在$ watch上）
根据位置（在预链接阶段）更改活动标签

app.directive('tabRoute',function($location,$timeout){
  return {
    scope: {
      tabRoute : "="
    },
    compile: function(){
      return {
        pre: function(scope,elm,attrs){
          scope.tabRoute.active = ($location.path() === scope.tabRoute.url);
        },
        post: function(scope,elm,attrs){
          scope.$watch('tabRoute.active',function(){
            if(scope.tabRoute.active) {
              $location.path(scope.tabRoute.url)
            }
          })          
        }
      }     
    }
  }
})

最后，标记

<tab ng-repeat="tab in tabs" 
     heading="{{tab.title}}" 
     active="tab.active" 
     disabled="tab.disabled" 
     tab-route="tab">

如何在Angularjs中为动态选项卡实现url

1 个答案:

最后，标记