javascript - Angular 变量更改后恢复为原始值

Question

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

我的问题是我使用 $scope 变量来保存当前所选子类别(或面包屑)的名称，但它不会保存新值。它很快插入新值，但随后恢复到原始的“顶级”类别。

子类别是类别的子类别，在 ui-router 中如下所示:

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

category.html(“0”表示所有类别的顶级)

<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;

        });*/
}
}

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

那是什么？我不知道。函数正在被调用，数据是正确的，但 Angular 不会更新变量。我想我会放弃 Angular，直到 2.0 到来。我在这个项目中遇到的 80% 的问题都是试图找出像这样的 Angular 怪癖。

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;

}

将 Controller 修改为如下所示:

$scope.breadCrumbManager = function(categoryId) {

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

}