ディレクティブの値が更新されない理由 - 角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> 

私はこの

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

のような部分dashboardでディレクティブを含めています。これは、コンソールに結果を示してい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

ディレクティブを正しく使用していません。

<mallsproduct ..> 

---

またはあなたのディレクティブはキャメル記法定義します：あなたはとしてそれを使用するべきであることを意味

mainControllers.directive('mallsproduct' 

：あなたはとして定義

mainControllers.directive('mallsProduct' 

次に、あなたがあなたとしてそれを使用することができます今すぐ：

<malls-product ..> 

Answer 2

これはのためです。隔離されたスコープは、その親スコープについて何も知らない。隔離されたスコープを持つディレクティブを作成したばかりです。

親スコープデータにアクセスするには、スコープデータを明示的にという指令に渡す必要があります。これは、DDOでスコープオブジェクトのプロパティを設定することによって実現されます。

もう1つ重要なことは、これらのプロパティもMUSTというディレクティブhtml要素の属性として設定されていることです。