javascript - 为什么指令中的值没有得到更新 - 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 ..>