我很新，ui.router，我剛剛拿起它！但我有一種情況，我需要加載第一個視圖，然後點擊它可以加載到第二個視圖中的內容沒有替換第一個內容...我很難計算儘管......如何做這種行爲似乎應該很簡單。ui.router /角度 - 加載二次視圖與點擊而不替換主視圖

這樣的行爲可能嗎？

HTML

<div class="col-lg-12"> 
    <div class="col-lg-3"><!-- menu --></div> 
    <div class="col-lg-9"> 
     <div ui-view="main"></div> 
     <div ui-view="lookup"></div> 
    </div> 
</div>

路由

$stateProvider 
    .state('pages', { 
     url: '/pages/{page:.*}', 
     views: { 
      'main': { 
       templateUrl: function(stateParams) { 
        return String.format('home/{0}/{1}.html', './pages', stateParams.page); 
       } 
      } 
     } 

    }) 
    .state('lookup', { 
     url: '/lookup/{page:.*}', 
     views: { 
      'lookup': { 
       templateUrl: function (stateParams) { 
        return String.format('home/lookup/{0}.html', stateParams.page); 
       } 
      } 
     } 
    })

來源

2015-12-01 Ciel

你想要在第一個視圖中加載第二個視圖嗎？ – koox00

如果這是唯一的選擇，那是可以接受的 - 但我寧願能夠獨立加載兩個視圖，不管它們是否被包含。但我對這件事並不是很挑剔。 – Ciel

它現在如何工作？我認爲它應該與你擁有的一樣。嘗試過絕對名稱，例如：'lookup @ lookup'，'main @ pages'？ – koox00

你應該使用嵌套的狀態：

$stateProvider 
    .state('pages', { 
     url: '/pages/{page:.*}', 
     views: { 
      'main': { 
       // Showing off how you could return a promise from templateProvider 
       templateUrl: function(stateParams) { 
        return String.format('home/{0}/{1}.html', './pages', stateParams.page); 
       } 
      } 
     } 
    }) 
    .state('pages.lookup', { 
     url: 'lookup', 
     views: { 
      'lookup': { 
       // Showing off how you could return a promise from templateProvider 
       templateUrl: function (stateParams) { 
        return String.format('home/lookup/{0}.html', stateParams.page); 
       } 
      } 
     } 
    })

網址查找現在pages/{page}/lookup

而且你ui-view=lookup應該可以位於內main加載的意見裏面。
它應該與您當前的html設置一起工作。

來源

2015-12-01 09:04:35 koox00

hrnm，這似乎並不奏效。在這裏，我創建了一個存儲庫，告訴你一切是否有幫助：https://github.com/ciel/router-docs – Ciel

只需運行'gulp sass'和'gulp connect'並瀏覽到'http：// localhost：631 /' – Ciel

好吧我會考慮它:) – koox00

我認爲你應該使用一個directive你的第二個觀點。它可以讓你在同一個視圖中有兩個模板。 params_you_want_to_pass可讓您在第二個模板中獲得一些信息。

我希望這已經夠清楚了。

HTML

<div class="col-lg-12"> 
    <div class="col-lg-3"><!-- menu --></div> 
    <div class="col-lg-9"> 
     <div ui-view="main"></div> 
     <lookup-directive info="params_you_want_to_pass"></lookup-directive> 
    </div> 
</div>

ROUTING

$stateProvider 
    .state('pages', { 
     url: '/pages/{page:.*}', 
     views: { 
      'main': { 
       templateUrl: function(stateParams) { 
        return String.format('home/{0}/{1}.html', './pages', stateParams.page); 
       } 
      } 
     } 

    })

DIRECTIVE

angular.module('yourModule').directive('lookupDirective', lookupDirective); 
lookupDirective.$inject = []; 

function lookupDirective() { 
    return { 
    restrict: 'E', 
    scope: { 
     info: '=' 
    }, 
    templateUrl: 'yourtemplate.html' 
    }; 
});

來源

2015-12-01 08:31:44 Ankirama

我有點不清楚你爲什麼這麼說。你能否詳細說明指令如何解決這個問題？ – Ciel

對不起，我添加了一個例子，你需要做什麼？ – Ankirama

是的，你可以實現在同一個模板的多個視圖。

<body ng-app="main"> 
    <script type="text/javascript"> 
    angular.module('main', ['ui.router']) 
    .config(['$locationProvider', '$stateProvider', function ($locationProvider, $stateProvider) { 
     $stateProvider 
     .state('home', { 
      url: '/', 
      views: { 
       'header': { 
        templateUrl: '/app/header.html' 
       }, 
       'content': { 
        templateUrl: '/app/content.html' 
       } 
      } 
     }); 
    }]); 
    </script> 
    <a ui-sref="home">home</a> 
    <div ui-view="header">header</div> 
    <div ui-view="content">content</div> 
    <div ui-view="bottom">footer</div> 
    <script src="bower_components/angular/angular.js"></script> 
    <script src="bower_components/angular-ui-router/release/angular-ui-router.js"> 
</body>

來源

2015-12-01 08:44:55 Kais

這不會做我在嘗試 - 它只適用於如果你同時加載兩個視圖。我需要加載一個，然後下一個加載時點擊別的東西。 – Ciel

爲什麼不使用ng-if條件來隱藏模板並在點擊某物時顯示.. – Kais

我不認爲你理解我所問的問題，我很抱歉。 – Ciel

ui.router /角度 - 加載二次視圖與點擊而不替換主視圖

HTML

路由

回答

HTML

ROUTING

DIRECTIVE

相關問題