2012-11-01 60 views
0

如果我有一个这样的典型路径:Angular JS - 如何将参数添加到模板URL /动态模板?

angular.module('app', ['ngResource']). 
    config(function($routeProvider, $locationProvider) { 
    .when('/item/:itemId', { 
    template: '<div ng-bind-html-unsafe="html"></div>', 
    controller: blobs.controller.RouteController, 
    }) 
}); 

我如何能实现从服务器请求一个“动态视图”?即。服务器的路由应该导致一个动态的php页面,填充和保存一些数据,并根据路由中给定的itemId返回它想要的任何html。 我试图建立一些复杂的路线监控和Ajax请求的模板容器,然后注入响应HTML,在RouteController的负荷,即:

Service.request('item/'+$routeParams.itemId, {}, function(r) { 
    $scope.html = r; 
    $compile($scope.html)($scope); //generates infinite loop for some reason? 
    $scope.$apply(); 
}); 

不过这倒不工作。 PHP的响应html get被加载到容器模板中很好,但数据绑定似乎不起作用(即它包含{{*}}到处)。

有没有更好的方法来做到这一点? 我真的只是试图把这样的路线:

/项目/ MY-项目 成“templateUrl”是一样的,即: /项目/我的产品部件或/视图/项目/ My-Item ..etc

谢谢你的帮助!

Ryan

+0

我想到的妥协方案是让容器模板ng-包含真正的php内容,使用控制器范围中的参数itemId集。

+0

您是否尝试过指定一个php文件而不是硬编码路由器内部的模板?像这样:template:'dynamicsContent/whatever.php' –

+0

是的,但是这仍然不能解决向模板获取动态参数的问题,无论它是什么。 –

回答

2

这不是直接回答你的问题。但我认为这是一个重要的概念,你应该考虑。

为了充分利用AngularJS的潜力,您必须完全理解它的范例。

Angular是关于瘦服务器和胖客户端的。服务器主要是一种为前端应用程序提供数据的RESTful服务。该数据然后通过绑定呈现给视图。模板在客户端而不是服务器端进行处理。这种方法可以让您更好地分担服务器和客户端之间的责任。

因此,考虑到您的使用情况,我会建议您将模板的“动态”逻辑从服务器端移动到客户端,并尽量不要混合它们。理想情况下,您的模板应该是一个静态文件,可以由某个CDN提供服务。您可以使用ngResource模块和RESTfull接口从服务器获取您的服务器端逻辑依赖于呈现动态模板的所有数据。您可以通过使用适当的绑定和指令客户端来实现几乎任何呈现逻辑。你甚至可以创建自己的指令来隔离代码的可重复部分,并干掉它。

我希望它有帮助。