如何替换ng-view中的部分部分? [英] How to replace a part of sections in ng-view?

问题描述

我倾向于 Angular 的路线.只需设置 template 属性，就非常清楚如何将视图加载到 ng-view 中.

假设我在视图上有一个小部件.当用户导航到/#/changeWidget 时，如何仅替换小部件内容?

在我看来，我只能使用单个 ng-view

ma​​in.html

<div ng-view></div>

js

var app = angular.module("payment",["ngRoute"]);功能列表控制器($scope){}app.config(function($routeProvider, $locationProvider){$routeProvider.when('/list', {templateUrl: 'templates/list.html',控制器:列表控制器}).当('/chagneWidget'，{templateUrl: 'templates/widget2.html',控制器:widget2Controller}).除此以外({重定向到:'/列表'});});

所以基本上，当 '/changeWidget' 被触发时，我只想替换 list.html

中的一个 div

路由器是否有可能，还是我应该做...一个ajax调用并操作DOM?

解决方案

我不认为使用 angular router 很容易 - 说实话它的一个很大限制.但是，嘿，有一个非常好的和流行的模块，它提供了这样的可能性:ui-router.如果您不阅读文档:

<块引用>

警告:UI-Router 是预测试版，正在积极开发中.因此，虽然这个库经过了良好的测试，但 API 可能会发生变化.不建议在需要保证稳定性的项目中使用它.

真的有必要通过改变路由来更新widget吗?如果没有，有很多选择可以在角度上做到这一点.如果你真的必须改变路线，你可以使用这个技巧:

$scope.$on("$locationChangeStart", function (event, next, current) {如果(下一个 == 'your_domainin/your_specific_url'){设置超时(函数(){$window.history.pushState("对象或字符串","标题", '/your_specific_url')},20);event.preventDefault();//... 更新你的视图}});

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

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

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'
        });

    });

So basically, when '/changeWidget' gets triggered, I just want to replace a div from list.html

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

解决方案

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:

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-view中的部分部分?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！