0

以下のディレクティブを作成しました。これは、提供されたデータに基づいて一連のボタンを作成します。

angular.module('btnbar.directive', ['messaging']).
directive("btnBar", function(){
  return {
    restrict: 'E',
      $scope.buttons = [{href: '#/students', icon:'icon-ok'},
                         {href: '#/students', icon:'icon-remove'},
                         {href: '#/students/new', icon:'icon-plus'}];    
    },
    template:'<div class="btn-toolbar">' +
      '<a class="btn" ng-repeat="b in buttons" href={{b.href}}>' +
      '<i class={{b.icon}}></i></a></div>',
    replace:true
  }
});

上記のディレクティブはうまく機能します。ビューの ng-view が変更されるたびに、ボタンに新しい配列を渡したいと思います。

だから私は次の2つのことをしたい -

  1. ルートの変更に注意してください。

  2. ルートを変更したら、「btnbar.directive」スコープの「buttons」var を変更します。

それ、どうやったら出来るの ？

4

1 に答える 1

2

$location サービス ウォッチを挿入して、何かが発生したときにそれに応じて $scope.buttons を更新できます。これは私の試みです

angular.module('btnbar.directive', ['messaging']).
directive("btnBar", ['$location', function($location){
  return {
    restrict: 'E',
    template:'<div class="btn-toolbar">' +
      '<a class="btn" ng-repeat="b in buttons" href={{b.href}}>' +
      '<i class={{b.icon}}></i></a></div>',
    replace:true,
    link: function($scope, $element, $attrs) {
        $scope.buttons = [{href: '#/students', icon:'icon-ok'},
                          {href: '#/students', icon:'icon-remove'},
                          {href: '#/students/new', icon:'icon-plus'}];
        // What for the location
        $scope.$watch(function() {
            // You can define what part of the $location you want to watch for
            // E.g. $location.search().something (if you are only interested in that)
            return $location;
        }, function(newValue, oldValue) {
            // Do something with the $scope.buttons;
        });
    }
  }
}]);

それが役立つことを願っています。

于 2012-12-15T13:16:24.280 に答える