1

设置阶段 - 这不会发生在单个范围内，我可以在其中绑定一个简单的属性。我想要淡入/淡出的元素不位于控制器内，它位于 ng-app (rootScope) 内。此外，单击的按钮位于距根目录约 3 个子级的子范围内。

这是我目前解决这个问题的方法：

HTML（位于根范围内）：

<ul class="nav-secondary actions" 
  darthFader fadeDuration="200" 
  fadeEvent="darthFader:secondaryNav">

darthFader 是我的指令。

指示：

指令（'darthFader'，

function() {
        return {
            restrict: 'A',
            link: function($scope, element, attrs) {
                $scope.$on(attrs.fadeevent, function(event,options) {
                    $(element)["fade" + options.fade || "In"](attrs.fadeduration || 200);
                });
            }
        }

})

所以在这里我创建了一个事件处理程序，特定于给定元素，它调用fadeIn 或fadeOut，这取决于通过事件总线传递的选项（或默认为fadeIn/200ms）。

然后我从 $rootScope 广播一个事件来触发这个事件：

$rootScope.$broadcast('darthFader:secondaryNav', { fade: "Out"});

虽然这可行，但我并不热衷于为该指令的每个实例创建一个事件侦听器（虽然我预计屏幕上不会有太多的 darthFader，但它更适合我要建立的模式）。我也不热衷于将视图中的属性与控制器和指令中的事件处理程序耦合，但我目前没有包装辅助导航的控制器，所以我必须将辅助导航绑定到 $ rootScope，我也不喜欢。所以我的问题：

  1. 有没有办法在每次实例化我的指令时不创建事件处理程序来做到这一点？（也许是存储有状态元素列表的服务？）
  2. 我应该如何解耦我的视图、控制器和指令？
  3. 我还缺少其他任何明显的问题吗？

干杯!

4

2 回答 2

4

你在你的问题中提到

我想要淡入/淡出的元素不位于控制器内，它位于 ng-app (rootScope) 内。

我相信如果我要编写同样的功能，我会将元素放在它自己的控制器中——控制器负责管理视图和模型的交集，这正是你想要做的。

myApp.controller('NavController', function($scope) {
  $scope.fadedIn = false;
});

<ul ng-controller="NavController"
  class="nav-secondary actions" 
  darthFader fadeDuration="200" 
  fadeShown="fadedIn">

myApp.directive('darthFader', function() {
  return {
    restrict: 'A',
    link: function($scope, element, attrs) {
      var duration = attrs.fadeDuration || 200;
      $scope.$watch(attrs.fadeShown, function(value) {
        if (value)
          $(element).fadeIn(duration);
        else
          $(element).fadeOut(duration);
      });
     }
   };
});

如果您担心在多个控制器之间共享淡入/淡出状态，您应该创建一个服务来共享此状态。（您也可以使用$rootScope事件处理程序，但我通常发现共享服务更易于调试和测试。）

myApp.value('NavigationState', {
  shown: false
});

myApp.controller('NavController', function($scope, NavigationState) {
  $scope.nav = NavigationState;
});

myApp.controller('OtherController', function($scope, NavigationState) {
  $scope.showNav = function() {
    NavigationState.shown = true;
  };

  $scope.hideNav = function() {
    NavigationState.shown = false;
  };
});

<ul ng-controller="NavController"
  class="nav-secondary actions" 
  darthFader fadeDuration="200" 
  fadeShown="nav.shown">

<!-- ..... -->

<div ng-controller="OtherController">
  <button ng-click="showNav()">Show Nav</button>
  <button ng-click="hideNav()">Hide Nav</button>
</div>
于 2013-05-14T05:07:36.430 回答
0

创建一个自定义服务，将其注入控制器。在该服务上调用一个方法，该方法将执行淡入/淡出等。传递一个参数以传达附加信息。

于 2013-05-13T22:51:17.987 回答