通过模板传递价值

我使用角度和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有点混乱，所以选择了上面的答案。但感谢您的意见！ –

通过模板传递价值

回答

相关问题