带有动态网址的角度内联模板答案

【问题标题】：Inline template in angular with dynamic url带有动态网址的角度内联模板
【发布时间】：2015-10-23 11:31:05
【问题描述】：

您好，我想使用类似的功能，例如： Using Inline Templates in Angular

但在我的情况下，url 将是动态的。例如，在下面的代码中，url 将具有 /first 或 /second，但在我的情况下，它将具有类别 ID。可以有 100 个类别，所以我不能写 100 个条件

  learningApp.config(function ($routeProvider) {$routeProvider.
    when("/cat1",{ controller: "SimpleController", templateUrl: "temp1.html"}).
    when("/cat2", {controller: "SimpleController", templateUrl: "temp2.html"}).
    otherwise({redirectTo : "/first"});

});

<script type="text/ng-template" id="cat1.html">
<div class="view">
    <h2>First View</h2>
    <p>
        Search:<input type="text" ng-model="filterText" />
    </p>
    <ul class="nav nav-pills">
        <li ng-repeat="cust in customers | orderBy:'name' | filter: filterText "><a href="#">{{cust.name}} - {{cust.school}}</a></li>
    </ul>
</div>
</script>

<script type="text/ng-template" id="cat2.html">
<div class="view">
    <h2>Second View</h2>
    <p>
       Search:<input type="text" ng-model="filterText" />
    </p>
    <ul class="nav nav-pills">
        <li ng-repeat="cust in customers | orderBy:'name' | filter:    filterText "><a href= "#">{{cust.name}} - {{cust.school}}</a></li>
    </ul>
</div>

我肯定会有一个以 id 作为每个类别对应的类别 id 的部分。

【问题讨论】：

例如显示你只需要一个路由和一个模板。在类别 ID 的 url 中使用 $routeParams。听起来您需要学习一些路由教程并阅读 ngRoute 文档

标签： javascript angularjs angular-routing

【解决方案1】：

您可以像这样指定您的网址：

.when("/category/:catId") {
    controller: "ControllerName",
    templateUrl: "templateURL",
}

在你的控制器内部：

.controller('ControllerName', ['$scope', '$routeParams', function($scope, $routeParams) {
    var $scope.categoryFromRoute = $routeParams.catId;
}]);

例如- 导航到“/category/1”将导致 $routeParams.catId 在控制器内部的值等于 1。

【讨论】：