如何更换NG-鉴于部分的一部分吗？ [英] How to replace a part of sections in ng-view?

问题描述

我靠着角的路线。这是非常清楚如何通过简单的设置的模板属性加载一个视图到NG-视图。

I'm leaning Angular's route. It's very clear how to load a view into ng-view by simply setting template attribute.

让我们说我有一个视图一个小部件。当用户浏览到/＃/ changeWidget，我怎么只替换部件的内容？

Let's say I have a widget on a view. When a user navigate to /#/changeWidget, how do I replace ONLY the widget content?

看起来对我来说，我只能用单一的 NG-视图

it looks like to me that I can only use single ng-view

main.html中

<div ng-app="payment">

    <div ng-view></div>

</div>

JS

var app = angular.module("payment",["ngRoute"]);

function listController($scope) {
}

    app.config(function($routeProvider, $locationProvider){

        $routeProvider.when('/list', {
            templateUrl: 'templates/list.html',
            controller: listController
        }).
        when('/chagneWidget', {
            templateUrl: 'templates/widget2.html',
            controller: widget2Controller
        }).
        otherwise({
            redirectTo: '/list'
        });

    });

所以基本上，当'/ changeWidget'被触发，我只是想以取代从一个div list.html

是可能的路由器或者我应该只是做... Ajax调用和操作DOM？

is it possible with router or should I just do...an ajax call and manipulate DOM?

推荐答案

我不认为它是的轻松的可能的角路由器 - ，老实说是它的一个相当大的限制。但是，嘿有这非常好的，流行的模块，提供了这样的可能性： UI路由器。如果你不读文件：

I do not think it is easily possible with angular router -- and to be honest is quite a big limitation of it. But hey there is this very nice and popular module which offers such possibility: ui-router. In case you do not read documentation:

警告：UI-路由器是pre-β和正在积极发展。因此，虽然这个库是经过充分测试，该API可随时更改。不建议在需要保证稳定的项目中使用它。

Warning: UI-Router is pre-beta and under active development. As such, while this library is well-tested, the API is subject to change. Using it in a project that requires guaranteed stability is not recommended.

是不是真的有必要通过改变路线更新窗口小部件？如果不是有大量的选项来执行它棱角分明。如果你真的有改变路线，你可以使用这个技巧：

Is it really necessary to update the widget by changing the route? If not there are plenty of options to do it in angular. If you really have to change the route you can use this hack:

$scope.$on("$locationChangeStart", function (event, next, current) {

    if (next == 'your_domanin/your_specific_url') {
        setTimeout(function() {
            $window.history.pushState("object or string", 
            "Title", '/your_specific_url')},20);
        event.preventDefault();
        // ... update your view
    }
});

这篇关于如何更换NG-鉴于部分的一部分吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！