Question

我正在倾斜Angular的路线。非常清楚如何通过简单地设置模板属性将视图加载到ng-view中。

假设我在视图上有一个小部件。当用户导航到/＃/ changeWidget时，如何仅替换窗口小部件内容？

我觉得我只能使用单个 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'被触发时，我只想替换 list.html

中的div

是否可以使用路由器或者我应该做... ajax调用并操纵DOM？

Answer 1

我不认为角色router可以轻易 - 并且说实话是它的一个很大的限制。但是，有这个非常好的和受欢迎的模块提供了这样的可能性：ui-router。如果您没有阅读文档：

警告：UI-Router处于预测试状态且处于活动开发阶段。因此，虽然此库经过了充分测试，但API可能会发生变化。不建议在需要保证稳定性的项目中使用它。

是否真的有必要通过更改路线来更新小部件？如果没有，有很多选择可以角度来做。如果你真的需要改变路线，你可以使用这个黑客：

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

Answer 2

使用ngSwtich会出现什么问题？

ngSwitch指令用于有条件地交换DOM结构基于范围表达式的模板...指令本身与ngInclude类似，但不是下载模板代码（或从模板缓存中加载），ngSwitch简单地选择其中一个嵌套元素，并根据哪个元素使其可见匹配从计算表达式获得的值。

http://docs.angularjs.org/api/ng.directive:ngSwitch

如何在ng-view中替换部分部分？

2 个答案: