Question

我有几个绑定到代表产品的对象。但是，每当我更新底层产品对象时，我的绑定都不会更新。我怀疑这种情况正在发生，因为Angular仍在观察旧物体的属性。我怎样才能让Angular像我期望的那样行事？

模板

<div>
    <span>{{ selectedProduct.name }}</span>
    <ul>
        <li 
            ng-click="selectedProduct = product;"
            ng-repeat="product in products"
        ><img src="{{product.imgUrl}}"></li>
    </ul>
</div>

指令

module.directive('productList', function () {
    restrict: 'E',
    replace: 'true',
    scope: {
        products: '=',
        selectedProduct: '='
    },
    controller: function ($scope) {
        $scope.selectedProduct = products[0];
    }
});

编辑以澄清用法我的指令就像这样消费

TEMPLATE

<div ng-controller="arbitraryController">
    <product-list products="products" selected-product="selectedProduct"></product-list>
</div>

CONTROLLER

module.controller('arbitraryController', function ($scope) {
    $scope.products = [{
        name:'boots', 
        imgUrl:'boots.jpg'
    },{
        name:'fluffy bunnies', 
        imgUrl:'bunnies.jpg'
    }];
});

Answer 1

有人想要记住，在范围之间传递对象时是：

＆＃34;每当你拥有ng-model时，那里的某个地方就必须有一个点。如果你没有点，那你就错了。＆＃34;

引用来自这段视频angular JS - best practice（29:19），这里有很好的解释：

Nested Scopes in Angular JS

我创建了plunker，展示了如何做到这一点。我们将把所有相关的东西放到一个名为model的模型实例中：

.controller('arbitraryController', ['$scope',
    function($scope) {
      var products = [
        {name: 'boots', imgUrl: 'boots.jpg'},
        {name: 'fluffy bunnies', imgUrl: 'bunnies.jpg'}
      ];

      $scope.model = {
        products : products,
        selectedProduct : products[0],
      };
    }
  ])

并将其传递给指令：<product-list product-model="model"></product-list>，该代码将更新为：

.directive('productList', function() {
    return {
      restrict: 'E',
      replace: 'true',
      templateUrl: 'products.tpl.html',
      scope: {
        model: '=productModel',
      },
    }
})

如何协同工作观察here。

在更新对象时，绑定到对象的属性不会更新

1 个答案: