Question

我有一个带有范围变量的指令，这些变量依赖于其他范围变量。我希望如果方程右侧的范围变量发生变化，它会更新左边，但这似乎不会发生。

在下面的示例中，当运行selectProduct（）时，它应该更新产品信息，包括产品标题，但它不起作用，除非我直接更新scope.title，如函数底部的注释行。

controller:function($scope){
        $scope.products = $scope.productGroup.products;

        $scope.selected_product = $scope.productGroup.products[$scope.productGroup.selected_product];
        $scope.title = _.isEmpty($scope.selected_product) ? $scope.productGroup.title : $scope.selected_product.title;
        $scope.excerpt = _.isEmpty($scope.selected_product) ? $scope.productGroup.excerpt : $scope.selected_product.excerpt;
        $scope.description = _.isEmpty($scope.selected_product) ? $scope.productGroup.description : $scope.selected_product.description;

        $scope.selectProduct = function(){
            $scope.selected_product = $scope.productGroup.products[1];
            console.log($scope.selected_product);
            //$scope.title = $scope.selected_product.title;
        }
    },

Answer 1

在您的模板中，只需绑定到{{ selected_product.title }}，而不是设置$scope.title = $scope.selected_product.title并绑定到{{ title }}。

根据经验，不要滥用$scope作为模型。甚至不是您的ViewModel。 JavaScript的原型继承和变量引用系统使得Angular不会真正遵循传统的MVVM模式，其中$scope将是您的ViewModel。

如果没有问题的工作示例，我想在黑暗中尝试一下，并建议您将代码重构为类似的内容。

controller:function($scope){
    $scope.products = $scope.productGroup.products;
    $scope.selected_product = $scope.products[$scope.productGroup.selected_product] || {
        title: $scope.productGroup.title,
        excerpt: $scope.productGroup.excerpt,
        description: $scope.productGroup.description
    };

    $scope.selectProduct = function(){
        $scope.selected_product = $scope.productGroup.products[1];
    }
},

请务必阅读本文以获取更多背景信息：

What are the nuances of scope prototypal / prototypical inheritance in AngularJS?

你的问题实际上似乎并不完全与原型继承有关，但仍然要确保阅读和理解它。据我所知，在您的代码中，真正的问题是您设置$scope.title一次，然后期望它会根据$scope.selected_product的更改自动更改，但为什么要这样做？这两者之间没有神奇的联系。但是，如果您将代码重构为我提供的代码，您不仅可以使绑定工作，而且还可以减少重复_.isEmpty()次检查（我怀疑您首先需要这些检查）; - ））

Angular JS范围变量依赖于另一个范围变量，不会更新

1 个答案: