Warum Wert in Direktive nicht aktualisiert wird - Angular Js?

Question

Ich habe gerade ein Problem Ich habe eine directive geschrieben, aber es wird nicht aktualisiert, ich weiß nicht, warum, in der Konsole ändert es sich aber in directive es nicht.

Hier ist meine Richtlinie

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> 

Ich schließe Richtlinie in dashboard teilweise ähnlichen

<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--> 

und Dies ist die api, die das Ergebnis in der Konsole funktioniert zeigen.

$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); 
       }); 
    }; 

Was ist die Frage, warum es nicht Update wird immer, wenn ich rootscope verwenden dann funktioniert es gut, offensichtlich ist es auch, aber nicht mit $scope.

Hinweis: Wenn Wert ist gleich 2 Ich bekomme neue Ergebnisse, aber nicht in der Direktive nur in der Konsole. Standardmäßig hat den Wert 1.

Answer 1

Sie verwenden Ihre Anweisung nicht korrekt. Sie definieren es als:

mainControllers.directive('mallsproduct' 

Was bedeutet, dass Sie es als verwenden sollten:

<mallsproduct ..> 

---

Oder definieren Sie Ihre Richtlinie camelcase:

mainControllers.directive('mallsProduct' 

Dann können Sie es, wie Sie verwenden jetzt tun:

<malls-product ..> 

Answer 2

Dies ist wegen der Isolierte Bereich weiß nichts über seinen übergeordneten Bereich. Sie haben gerade eine Direktive mit einem isolierten Bereich erstellt.

Um auf alle übergeordneten Scope-Daten zugreifen zu können, müssen wir die Scope-Daten explizit an unsere Direktive weiterleiten, . Dies wird durch Festlegen von Eigenschaften für das Bereichsobjekt im DDO erreicht.

Eine andere wichtige Sache ist, dass diese Eigenschaften auch MUSS als die Attribute der Richtlinie HTML-Element gesetzt werden müssen.