Question

要设置阶段 - 这不会发生在单个范围内，我可以绑定一个简单的属性。我想淡入/淡出的元素不在控制器内，它位于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，但它更适合我建立的模式）。在我的视图中将我的属性与我的控制器和放大器中的事件处理程序耦合，我也不是很疯狂。指令，但我目前没有包含secondary-nav的控制器，所以我必须将secondaryNav绑定到$ rootScope，我也不喜欢。所以我的问题：

每次实例化我的指令时，有没有办法在不创建事件处理程序的情况下执行此操作？（也许是存储有状态元素列表的服务？）
我应该如何分离我的观点，控制器和指示？
我错过了任何其他明显的问题？

干杯！

Answer 1

你在问题中提到

我要淡入/淡出的元素不在控制器内，它位于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>

Answer 2

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

在AngularJS中创建与范围无关的fadein / fadeout指令

2 个答案: