爲什麼在指令中的值沒有得到更新 - Angular Js？

Question

我剛剛遇到一個問題，我寫了一個directive但它沒有得到更新，我不知道爲什麼，在控制檯它確實改變，但在directive它沒有。

這裏是我的指令

mainControllers.directive('mallsproduct', function() { 
    return { 
     restrict: 'E', 
     scope: { 
      productInfo: '=info', 
      linkid: '=linkid' 
     }, 
     templateUrl: 'directives/dashboard_product.html' 
    }; 
}); 


Here is my `html` 

     <div class="aa-properties-content-body mg-7" ng-controller="DashboardController as ctrl"> 
      <ul class="aa-properties-nav aa-list-view"> 
       <li style="border: 1px solid #ccc;margin-bottom: 25px;" ng-repeat="active_products in productInfo.items"> 
        <article class="aa-properties-item mg-top-0-notimp"> 
         <a class="aa-properties-item-img" href="#/product/{{active_products.id}}"> 
          <img ng-if="active_products.photos[0].path" resize-image alt="img" class="" src="{{active_products.photos[0].path}}"> 
          <img ng-if="!active_products.photos[0].path" resize-image class="" src="img/default_product.jpg" alt=""> 
         </a> 
         <div class="aa-properties-item-content"> 
          <div class="aa-properties-about padding-0-notimp"> 
           <h5><a href="#/product/{{active_products.id}}">{{active_products.name| limitTo : 10}}{{active_products.name.length > 10 ? '...' : ''}}</a></h5> 
           <p class="font-size-11-imp"><i class="fa fa-building-o" aria-hidden="true"></i> {{active_products.mall.name| limitTo : 10}}{{active_products.mall.name.length > 10 ? '...' : ''}}</p> 
           <p class="font-size-11-imp"><i class="fa fa-map-marker" aria-hidden="true"></i> {{active_products.mall.address| limitTo : 10}}{{active_products.mall.address.length > 10 ? '...' : ''}}</p>      
           <p class="font-size-11-imp"><i class="fa fa-phone" aria-hidden="true"></i> {{active_products.shop.telephone}}</p>      
           <p class="font-size-11-imp" ng-if="linkid == 3"><i class="fa fa-eye" aria-hidden="true"></i> {{active_products.views}}</p>    
           <div class="modal-demo"> 
            <script type="text/ng-template" id="myModalContent.html"> 
             <div ng-include src="'partials/update_product.html'"></div> 
            </script> 
            <div ng-controller="AddProductController"> 
             <button ng-click="view_product(active_products.id)"><i class="fa fa-pencil" aria-hidden="true"></i></button>        
             <button ng-click="del_product(active_products.id)"><i class="fa fa-trash-o" aria-hidden="true"></i></button> 
             <button ng-if="linkid == 2" ng-init="status = 1" ng-click="reactivate_product(active_products.id, status)"><i class="fa fa-lock" aria-hidden="true"></i></button> 
            </div>   
            <div class="modal-parent"> 
            </div> 
           </div> 
          </div> 
         </div> 
        </article> 
       </li> 
      </ul> 
      <div class="aa-title pad-top-30" ng-if="linkid == 1"> 
       <p>Global page count for active product is {{global_pagecount}} and active product count from API is {{productInfo._meta.pageCount}}</p> 
       <h3 ng-if="global_pagecount < productInfo._meta.pageCount" class="text-align-center color-feroz cursor-pointer" ng-click="load_more(global_pagecount, linkid)">{{$root.translated_labels.dashboard.load_more}}</h3> 
      </div> 
      <div class="aa-title pad-top-30" ng-if="linkid == 3"> 
       <p>Global page count for most viewed is {{global_pagecount_mostv}} and most viewed count from API is {{productInfo._meta.pageCount}}</p> 
       <h3 ng-if="global_pagecount_mostv < productInfo._meta.pageCount" class="text-align-center color-feroz cursor-pointer" ng-click="load_more(global_pagecount_mostv, linkid)">{{$root.translated_labels.dashboard.load_more}}</h3> 
      </div> 
     </div> 

我包括dashboard指令部分這樣

<div class="active tab-pane" ng-if="linkid === '1'"> 
        <malls-product info="active_products" linkid="linkid"></malls-product> 

       </div> 

       <!--Active products list ends here --> 

       <!-- Get Inactive Products --> 

       <div class="active tab-pane" ng-if="linkid === '2'" > 
        <malls-product info="$root.inactive_products" linkid="linkid"></malls-product> 
       </div> 

       <!--Get Inactive products ends here --> 

       <div class="active tab-pane" ng-if="linkid === '3'" > 
        <malls-product info="$root.mostviewed_products" linkid="linkid"></malls-product> 
       </div> 

       <!-- View Profile--> 

，這是不顯示結果在控制檯中api。

$scope.global_pagecount = 1; 

$scope.active_product = function() { 
     $http.get($rootScope.baseurl + 'abc?&page=' + $scope.global_pagecount, 
       {headers: 
          {'Content-Type': 'application/x-www-form-urlencoded', 
           'Authorization': $rootScope.keyword_auth_token, 'Accept-Language': $cookies.get('type')} 
       }) 
       .success(function (data) { 
        //$scope.active_product_pageCount = data._meta.pageCount; 

        if ($scope.global_pagecount === 1) //I know for sure the first page of pagination is 1 
        { 
         $scope.active_products = data; 
        } 
        if ($scope.global_pagecount > 1) // If user click load more global count gets incremented and new results push in active_producst 
        { 
         /* for loading new results Pagination Applied */ 

         for (var times = data.items.length - 1; times >= 0; times--) { 
          $scope.active_products.items.push(data.items[times]); 
         } 
        } 
        console.log($scope.active_products); 

       }) 
       .error(function (data) { 
        // console.log(data); 
       }); 
    }; 

問題是什麼，它爲什麼沒有得到更新，如果我使用rootscope然後正常工作，顯然它有太多，但不與$scope。

注意：當scope.global_pagecount的值等於2我得到新的結果，但不是隻在控制檯中的指令。默認scope.global_pagecount的值等於1。

Answer 1

你不正確地使用你的指令。你把它定義爲：

mainControllers.directive('mallsproduct' 

這意味着你應該使用它作爲：

<mallsproduct ..> 

---

或定義你的指令駝峯格式：

mainControllers.directive('mallsProduct' 

然後你可以使用它作爲你現在做：

<malls-product ..> 

Answer 2

這是因爲隔離範圍不知道其父範圍的任何內容。您只是創建了一個隔離範圍的指令。

要訪問任何父範圍數據，我們需要將範圍數據明確地傳遞給我們的指令。這是通過設置DDO中的作用域對象的屬性來實現的。

另一個重要的事情是，這些屬性也必須設置爲指令html元素的屬性MUST。