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元素的属性。

为什么指令中的值不会更新 - Angular Js？

2 个答案: