1

我有一个指令，其中的作用域变量依赖于其他作用域变量。我希望如果等式右侧的范围变量发生变化，它会更新左侧，但这似乎没有发生。

在下面的示例中，当运行 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;
        }
    },
4

1 回答 1

1

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

作为一个经验法则，不要滥用$scope作为你的模型。甚至不像您的 ViewModel。JavaScript 的原型继承和变量引用系统使得 Angular 并没有真正遵循传统的 MVVM 模式，而传统的 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];
    }
},

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

AngularJS 中范围原型/原型继承的细微差别是什么？

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

于 2013-09-28T22:37:26.920 回答