Question

我有5个菜单项，它们调用相同的局部视图但具有不同的QS参数。目标是显示相同的部分，但根据用户选择的菜单将不同的数据加载到网格中。菜单代码：

<li>
    <a href="#/workspace.html?id=1" target="_self">
        <i class="fa fa-inbox"></i><span>Credit Analysis</span>
    </a>
</li>
<li>
    <a href="#/workspace.html?id=2" target="_self">
        <i class="fa fa-inbox"></i><span>Approval</span>
    </a>
</li>

问题是控制器只加载一次，我似乎无法再次捕获查询字符串更改事件（我认为因为它是相同的部分和Angular只是在QS更改时不重新加载控制器）。所以URL改变但我的事件不会触发（下面）。可以做些什么？

MetronicApp.controller('WorkspaceController', function($rootScope, $scope, $http, $timeout, $location) {
$scope.$on('$viewContentLoaded', function() {   
    // initialize core components

}）;

$scope.$watch('location.url()', function (url) {
    //alert('url change');
}, true);

var id = ($location.search()).id;
console.log(id);

switch (id) {
    case '1':
        $scope.inboxName = 'Credit Analysis';
        break;
    case '2':
        $scope.inboxName = 'Approval';
        break;
    case '3':
        $scope.inboxName = 'Documentation';
        break;
    case '4':
        $scope.inboxName = 'Workspace';
        break;

}

Answer 1

你需要使用一个函数，而不是你想要的字符串：

$scope.$watch(function() {
    return $location.url();
}, ...

并且，在更改之后，您需要运行您的开关。

请查看plunker

Angular - catch部分中的查询字符串更改

1 个答案: