通過模板傳遞價值

我使用角度和ui路由器爲我的模板。通過模板傳遞價值

這是這部分路由，

.state('home.container-big',{ 
    url: '', 
    views: { 
    "container-big":{ 
     templateUrl: '../assets/angular-app/templates/_movie-info.html', 
     controller: 'addMovieCtrl' 
    } 
    } 
}) 

.state('home.container-big.container-big-trailer',{ 
    url: '', 
    views: { 
    "youtube_trailer":{ 
     templateUrl: '../assets/angular-app/templates/_container-trailer.html' 
    } 
    } 
})

當我home.container-big狀態加載它注入了__movie-info.html.haml模板到container-big視圖。

.container-info 
    %ul.trailers 
    %li{"ng-repeat" => "trailer in filteredTrailers = (trailers | filter: { movie_id: movie.movie_id})"} 
     %a{:href => "#", "value" => "{{ trailer.link }}", "ui-sref" => ".container-big-trailer"} Load trailer 

.container-trailers 
    %div{"ui-view" => "youtube_trailer"}

此模板的另一個模板注射，當用戶點擊Load trailer它加載home.container-big.container-big-trailer狀態和噴射模板_container-trailer.html.haml在youtube_trailer視圖。

%youtube{:videoid => "value from clicked link"}

我想要做的，當用戶點擊Load template通過<a href>從_movie-info模板點擊進入_container-trailer模板值。

這裏有一個更清楚的例子，

_movie-info.html.haml模板，

<div class="container-info"> 
    <ul class="trailers"> 
    <li><a href="#", value="KlyknsTJk0w", ui-sref=".container-big-trailer">Load trailer</a></li> 
    <li><a href="#", value="nyc6RJEEe0U", ui-sref=".container-big-trailer">Load trailer</a></li> 
    <li><a href="#", value="zSWdZVtXT7E", ui-sref=".container-big-trailer">Load trailer</a></li> 
    <li><a href="#", value="Lm8p5rlrSkY", ui-sref=".container-big-trailer">Load trailer</a></li> <-- clicked element 
    <li><a href="#", value="ePbKGoIGAXY", ui-sref=".container-big-trailer">Load trailer</a></li> 
    </ul> 
</div> 

<div ui-view="youtube_trailer"></div> <-- here the _container-trailer is injected

_container-trailer.html.haml

<youtube videoid="Lm8p5rlrSkY"></youtube>

來源

2015-12-06 Peter Boomsma

在你的狀態定義聲明一個參數：

$stateProvider.state(..., { 
    params: { 
     value: null 
    } 
});

如果你注入 $stateParams到控制器和retreive你的價值

<a value="KlyknsTJk0w" ui-sref=".container-big-trailer({value: KlyknsTJk0w})">Load trailer</a>

現在：

function ($scope, $stateParams) { 
    $scope.value = $stateParams.value; 
}

參考： https://github.com/angular-ui/ui-router/wiki/Quick-Reference#ui-sref

例子： http://plnkr.co/edit/bSy6ezIJZshKSFFs298M?p=preview 然後你就可以用ui-sref發送可選參數

來源

2015-12-06 23:33:08 iH8

你還需要''''參數在狀態的'url'來填充'$ stateParams' – Phil

不完全但確定，你需要確定一個參數，但它不必在URL中，附加到我的答案。日Thnx！ – iH8

不知道你可以通過'ui-sref'傳遞非url參數。無法在頁面刷新中生存，但仍然很高興知道:) – Phil

M阿克其狀態的一部分，並指定參數控制器的範圍（或控制器例如，如果你使用「控制器」）

.state('home.container-big.container-big-trailer',{ 
    url: '/:videoId', 
    views: { 
    "youtube_trailer":{ 
     templateUrl: '../assets/angular-app/templates/_container-trailer.html', 
     controller: function($scope, $stateParams) { 
     $scope.videoId = $stateParams.videoId; 
     } 
    } 
    } 
})

那麼你的_container-trailer.html可以使用

<youtube videoid="{{videoId}}"></youtube>

和你通過像這樣的參數

<a ui-sref=".container-big-trailer({videoId: 'Lm8p5rlrSkY'})">Load trailer</a>

來源

2015-12-06 23:34:17 Phil

因此，在狀態定義中，您可以製作自己的迷你控制器並使其充當該模板的控制器。這非常酷，謝謝，試試看。 –

我使用了這段代碼，它工作得很好，但它確實使URL有點混亂，所以選擇了上面的答案。但感謝您的意見！ –

通過模板傳遞價值

回答

相關問題