0

limitこの例では、特定の配列が表示できるように動的に設定しようとしています。

app-view.html

<things data="things.data" settings="things.settings"></things>

app-controller.js

$scope.$on('thingsCallback', function(e,d){
    $scope.things = d;                
});

ここでlimit、まだ設定されていないことがわかります。

things.html

<ul>
    <li ng-repeat="thing in data | limitTo: limit">
        {{thing.name}}
        <span ng-show="$index==settings.limit-1">
            <show-more min="settings.limit" max="data.length"></show-more>
        </span>
    </li>
</ul>

showMore.html

<li>
    <a href="#" ng-click="toggle()">{{text}}</a>
</li>

代わりに$watch、非同期データが来るのを待つために a を使用しています。

things-directive.js

.directive('things', function() {
    return {
        scope : {
          data : "=",
          settings : "="
        },
        restrict: 'E',
        replace: true,
        controller: function($scope){
          $scope.$watch('settings',function(){
            if($scope.settings){
              $scope.limit = $scope.settings.limit;
            }
          });
        },
        templateUrl: 'things.html'
    };
})

問題が始まります：

  • toggle()ユーザーが「さらに表示」を呼び出すと、 の値をにバインドされてlimitいる最大値に更新しようとしています。data.lengthmax

  • toggle()ユーザーが「show less 」を呼び出すと、 の値をにバインドされてlimitいる最小値に更新しようとしています。settings.lengthmin

show-more-directive.js

.directive('showMore', function() {
    return {
        scope : {
          min : "=",
          max : "="
        },
        restrict: 'E',
        replace: true,
        controller: function($scope){

          $scope.text = 'show more';

          $scope.toggle = function(){
            $scope.text = ($scope.max==$scope.$parent.limit)?'show more':'show less';                
            $scope.$parent.limit = ($scope.min==$scope.$parent.limit)?$scope.max:$scope.min;

            //Shows the value has updated, but the ng-repeat does not update?
            console.log($scope.$parent.limit);
          }
        },
        templateUrl: 'showMore.html'
    };
})

は$scope.$parent.limit変化しているように見えますが、ng-repeatは更新されず、残りの結果が表示されません。

  • ネストされたディレクティブを介して分離親スコープを変更するにはどうすればよいですか?

  • これを行うより良い方法はありますか？

4

1 に答える 1

0

toggle() の最後で要素を再コンパイルしてみてください。

.directive('showMore', function ($compile) {
  return {
    ...
    controller: function ($scope, $element) {

      $scope.toggle = function () {
        ...
        $compile($element.contents())($scope);
      }
    },
    ...
  }
于 2013-09-23T20:33:15.127 に答える