UI-Router嵌套模板父變量更改沒有反映在孩子中

Question

狀態聲明如下。正如你所看到的，有一個叫做「市場」的州，有一個名爲「列表」的子州。他們共享控制器，但有不同的模板。

.state('market', { 
      url: '/market', 
      templateUrl: '/market', 
      controller: 'MarketController', 
      access: { requiredLogin: true } 
     }).state('market.list', { 
      url: '/list', 
      templateUrl: '/market/list', 
      controller: 'MarketController', 
      access: { requiredLogin: true } 
     }) 

在我宣佈一個變量，$ scope.activeProduct，其值可以通過點擊一個按鈕，在修改控制器「市場。*」。

我已在兩個模板中放置{{activeProduct}}。點擊按鈕後，該值僅在「market。*」部分中更改。

這是在點擊按鈕觸發的功能：

 $scope.switchProduct = function (id) { 
     $timeout(function() { 
      $scope.$apply(function(){ 
        $scope.activeProduct = id; 
        MarketStorageService.activeProduct = id; 
        console.log("activeproduct changed to" + id); 
       } 
      ); 
     }); 
    }; 

我只是不明白，爲什麼在「market.list」的值不會改變。

Answer 1

這是角度範圍繼承的常見問題。子狀態的範圍有它自己的activeProduct，所以當它改變時，繼承鏈沒有被諮詢有關變化。這一切在What are the nuances of scope prototypal/prototypical inheritance in AngularJS?中都很好解釋。一個快速的解決將是引用父範圍變量：

$scope.$parent.activeProduct;

在孩子的狀態。