angularjs - 当对象更新时，绑定(bind)到对象的属性不会更新

Question

我有几个与代表产品的对象的绑定(bind)。但是，每当我更新底层产品对象时，我的绑定(bind)都不会更新。我怀疑发生这种情况是因为 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];
    }
});

编辑以澄清用法 我的指令是这样消耗的

模板

<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

在作用域之间传递对象时要记住的是:

"Whenever you have ng-model there's gotta be a dot in there somewhere. If you don't have a dot, you're doing it wrong."

引用来自此视频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 .