0

単一のテンプレートを使用して動的にテンプレートを設定する方法はありますか? http://jsfiddle.net/cmckeachie/mtV62/light/ 

var routingExample = angular.module('FunnyAnt.Examples.Routing', []);
routingExample.controller('HomeController', function ($scope) {});
routingExample.controller('AboutController', function ($scope) {});

routingExample.config(function ($routeProvider) {
    $routeProvider.
    when('/home', {
        templateUrl: 'embedded.home.html',
        controller: 'HomeController'
    }).
    when('/about', {
        templateUrl: 'embedded.about.html',
        controller: 'HomeController'
    }).
    otherwise({
        redirectTo: '/home'
    });
});

「Home」と「About」の値を動的に渡すために embedded.home.html テンプレートを使用したいとします。私はAngularJSが初めてなので助けてください。

4

1 に答える 1

0

はい、stateParams(ui-router) または routeParams for(ngRoute) を使用してそれを行うことができます。

次のようにStateparams

$stateProvider
    .state('contacts.detail', {
        url: "/contacts/:contactId",
        templateUrl: 'contacts.detail.html',
        controller: function ($stateParams) {
           // other stuff
        }
    })

サンプルの状態パラメーターは次のようになります

// Your $stateParams object could be
{ id:'123', type:'default', repeat:'0', from:'there', to:'here' }

ルートプロバイダーを使用して、次のようにできます

$routeProvider.
    when('/home:id:type', {
        templateUrl: 'embedded.home.html',
        controller: 'Ctrl1'
    }).
    when('/about:id:type', {
        templateUrl: 'embedded.about.html',
        controller: 'Ctrl2'
    });

routingExample.controller("Ctrl1", function($scope, $routeParams) {
  console.log($routeParams.id);
  console.log($routeParams.type);
  // do other stuff
});

詳しくはこちらのブログをご覧ください。

于 2015-07-28T05:39:57.510 に答える