Question

已解决：见下文

我有以下插图与实际PLUNKER CODER HERE

enter image description here

我已成功将左侧菜单动态更改为2种可能性之一以及各自的视图，但我的代码很粗糙，我注意到如果我升级到UI-Router 0.2.1，这将无效。

1。我的左侧菜单代码的要点：

<a data-ng-click="stateGo({state: viewState.Name}, {moduleId : viewState.Url})" style="cursor:pointer;">{{ viewState.Name}}</a>

2。控制器：

angular.module("app")
.controller("LeftPanelCtrl", [
    '$location', '$scope', '$http', '$state', '$stateParams',
    function ($location, $scope, $http, $state, $stateParams) {
        $scope.pageTitle = "Left Panel Menu";
        $scope.menuItems = [];
        activate();

        function activate() {
         var moduleId = undefined; 
         var stateName = undefined;

           //This is crude and I do not like it.

           if ($state.params.moduleId != null) {                        
                moduleId = $state.params.moduleId.split(',')[0];
                stateName = $state.params.moduleId.split(',')[1];
            }
            var moduleNum = (moduleId !== null && moduleId !== "" && moduleId !== undefined) ? moduleId : 1;
            $http.get("myJson.js").success(function(data) {
                angular.forEach(data, function(value) {
                    if (value.FK_DbModuleId == moduleNum) {
                        $scope.menuItems.push(value);
                    }
                });
             if(stateName !== undefined) {
                        $state.go(stateName);
                    }
                    return $scope.menuItems;
            });
        }

         $scope.stateGo = function (state, module) {
                var modId = '/' + module.moduleId;
                var stateName = ',' + state.state;
                $location.path(modId + stateName, false); <--- Very crude
            };

    }
]);

我的问题是3倍：

如果您转到plunker示例并单击链接，您会在预期视图显示之前看到从app.run返回到原始视图的轻微闪烁（除非预期和原始视图是相同）。关于如何避免这种情况的任何建议？
我在上面展示了两段令人难以置信的代码，但我似乎无法找到更优雅的方式，有什么建议吗？
如上所述，虽然这有效，疣和所有，使用ui-router 0.2.0，它没有0.2.1，任何熟悉新版本的人都可以向我解释为什么这个是

谢谢。

Answer 1

您不应在HTML标记内的stateGo中使用ng-click。

而是使用UI-Router（doc found here）提供的ui-sref属性。假设您要加载/users/1页面，并且已使用通配符users.profile将状态名称设置为id。然后你可以：

<div ui-sref="user.profiles({'id' : user.id})">View my Profile!</div>

user.id来自您的范围。

Answer 2

点击此处查看 Plunker Solution

问题的症结在app.run中，我的原始代码在哪里：

if (viewState.url != '0') {
    viewStateUrl = "/:moduleId";
}

 var state = {
   "url": viewStateUrl,
   "parent": viewState.parentName,
   "abstract": viewState.isAbstract,
   "views": {}
    };

应该将viewStateUrl定义为：

if (viewState.url != '0') {
    viewStateUrl = viewState.name +  "/:moduleId";
}

之后，重新定义我的链接只是一个简单的问题：

data-ui-sref="{{viewState.name}}({moduleId : viewState.url })"

正如Kousha建议的那样，并将我的控制器更新为仅显示模块ID的$ state.parm：

   function getSideMenuItems() {
     var moduleId = undefined; 
     var stateName = undefined;

    if ($state.params.moduleId != null) { moduleId = $state.params.moduleId;}

    var sideMenuItems = "sideMenuItems";
    var moduleNum = (moduleId !== null && moduleId !== "" && moduleId !== undefined) ? moduleId:1;
                datacontext.getSideMenuItems(sideMenuItems).then(function (data) {
                    angular.forEach(data, function (value) {
                        if (value.fK_DbModuleId == moduleNum) {
                            $scope.menuItems.push(value);
                        }
                    });

                });
                    return $scope.menuItems;
            };
        }

<强>结果：

更优雅
没有闪烁
适用于0.2.1

：）

AngularJS：将数据从ui-router状态传递到远程控制器＆amp;网址

2 个答案: