Question

我使用ui-router来管理项目管理部分的状态。管理部分有一个导航类别的地方。在此类别管理部分中，我尝试构建面包屑链接系统。

我的问题是我使用$ scope变量来保存当前所选子类别（或breadcrumb）的名称，但它不会保留新值。它非常快速地插入新值，但后来又恢复到原来的＆＃34;顶级＆＃34;类别。

子类别是该类别的子类，在ui-router中看起来像这样：

.state('admin.category', {
...
},
.state('admin.category.subcategory', {
...
},

category.html（＆＃34; 0＆＃34;表示所有类别的顶级水平）

<a ui-sref="admin.category.subcategory({categoryId: 0})" ng-click="breadCrumbManager(0)">View Categories</a>

<div ui-view></div>

subcategory.html（breadCrumbLinks是赢得新值的var）

<div>

{{breadCrumbLinks}}

<ul>
    <li ng-repeat="category in categories">
        <a ui-sref="admin.category.subcategory({categoryId: category.id})" ng-click="breadCrumbManager(category.id)">{{category.title}}</a>
    </li>
</ul>

<div ui-view></div>

AdminController（发生名称切换的地方）

$scope.breadCrumbManager = function(categoryId) {

if (categoryId === 0)
{
    console.log("top level");
    $scope.breadCrumbLinks = "Top Level"; //keeps switching to this!
}
else
{
    categoryService.getCategoryName(categoryId).then(function(link){

        console.log(link); //logs correctly
        $scope.breadCrumbLinks = link;
        //$scope.breadCrumbLinks = "sub level";

    });
}
}

新分配的痕迹导航名称正确地登录到控制台，并且在页面加载时没有额外调用此函数，因此我无法确定其恢复原因的原因。如果发生这种情况，控制台中应该有一个日志条目，但是没有。此外，显示类别的系统工作正常。

另外，通过ng-click访问此功能，每个链接都有自己的值。我不能一次点击两个链接。真的难倒在这里。

***编辑****

我已经注释掉了现在提取类别名称的部分。现在，它是一个简单的if语句，记录了categoryId以及它的调用位置：

$scope.breadCrumbManager = function(categoryId) {

if (categoryId === 0)
{
    $scope.breadCrumbLinks = "Top Level";
    console.log(categoryId + " is top level");
}
else
{
    $scope.breadCrumbLinks = "bottom Level";
    console.log(categoryId + " is bottom level");

        /*categoryService.getCategoryName(categoryId).then(function(link){

            $scope.breadCrumbLinks = link;

        });*/
}
}

它仍在显示＆＃34;顶级＆＃34; !!如果我在0页面上手动将category.html更改为实际的类别ID，则会显示＆＃34;底层＆＃34;。这让我相信它与从breadCrumbManager()路线调用admin.category.subcategory函数有关。

那是什么？我不知道。正在调用该函数，数据是正确的，但Angular不会更新变量。我想我会在2.0到达之前抛弃Angular。我在这个项目中80％的问题试图找出像这样的角度怪癖。

Answer 1

将面包屑数据提取到服务中解决了这个特殊问题。它仍然感觉像是一个不必要的级别添加到应用程序，以使这项工作。我在服务中添加了以下内容：

sailsCommerceApp.factory("categoryService", ['$http', '$q', function($http, $q) {

var breadCrumbs = "Default";

....

addBreadCrumb: function(categoryId) {

if (categoryId == 0)
{
    breadCrumbs = "Top Level";
}
else
{
    breadCrumbs = "Bottom Level";
}

},

viewBreadCrumb: function() {

    return breadCrumbs;

}

将控制器修改为如下所示：

$scope.breadCrumbManager = function(categoryId) {

categoryService.addBreadCrumb(categoryId);
$scope.breadCrumbLinks = categoryService.viewBreadCrumb();

}

更改后角度变量恢复为原始值

1 个答案: