Question

我在下面创建了一个指令，它根据提供给它的数据创建一组按钮。

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更改时，我都希望为按钮传递一个新数组。

所以我想做以下两件事 -

留意路线的变化。
在路线变更时，更改'btnbar.directive'范围内的'按钮'变量。

我该怎么做？

Answer 1

您可以为它注入$ 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;
        });
    }
  }
}]);

我希望有所帮助。

观察路线并更改指令范围内的变量。

1 个答案: