Почему значение в директиве не обновляется - Угловые 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 ..> 

---

или определить директиву camelcased:

mainControllers.directive('mallsProduct' 

Затем вы можете использовать его, как вы теперь:

<malls-product ..> 

Answer 2

Это связано с Изолированный объект ничего не знает о его родительской области. Вы только что создали директиву с изолированной областью.

Чтобы получить доступ к данным родительской области, , нам необходимо передать данные области в нашу директиву явно. Это достигается установкой свойств объекта области в DDO.

Другая важная вещь: эти свойства также ДОЛЖНЫ быть установлены как атрибуты элемента html директивы.