Question

我有一个带有绝对定位锚的侧边栏，单击时，应激活AngularJS指令以打开/关闭侧边栏。

当锚点位于aside元素之外时，这可以正常工作，但出于定位原因，我希望它在里面。但是，在元素中，我没有看到任何证据表明点击处理过。

<div class="page-wrap">
    <aside data-slide-toggle="smToggleSidebar" data-slide-toggle-duration="100">
    <a ng-click="smToggleSidebar=!smToggleSidebar">&lang;</a>
    // content here
    </aside>
</div>

该指令基本上是：

.directive('slideToggle', function() {
    return {
      restrict: 'A',
      scope:{
        isOpen: "=slideToggle"
      },
      link: function(scope, element, attr) {
        var slideDuration = parseInt(attr.slideToggleDuration, 10) || 200;
        scope.$watch('isOpen', function(newVal,oldVal){
          if(newVal !== oldVal){
            $(element).stop().slideToggle(slideDuration);
          }
        });
      }
    };
  })

我是棱角分明的新人，所以我确信这是我误解的事情，可能是范围。

Answer 1

Angular指令创建自己的作用域，因此如果将锚标记放在指令中，它将属于指令的作用域，而不是父作用域。要允许指令访问父函数，您必须通过将该函数添加到指令来将该函数传递给指令：

scope:{
    isOpen: "=slideToggle",
    onToggle: '&'
  }

然后从指令内部管理ng-click。我会建议这样的事情：

HTML

<div class="page-wrap">
    <aside on-toggle="onToggle()" data-slide-toggle="smToggleSidebar" data-slide-toggle-duration="100">
        <a ng-click="onToggle()">&lang;</a>
        // content here
    </aside>
</div>

指令

.directive('slideToggle', function() {
return {
  restrict: 'A',
  scope:{
    isOpen: "=slideToggle",
    onToggle: "&"
  },
  link: function(scope, element, attr) {
    var slideDuration = parseInt(attr.slideToggleDuration, 10) || 200;
    scope.$watch('isOpen', function(newVal,oldVal){
      if(newVal !== oldVal){
        $(element).stop().slideToggle(slideDuration);
      }
    });
  }
};

}）;

父控制器

$scope.onToggle = function(){
    $scope.smToggleSidebar =! $scope.smToggleSidebar;
};

ng当指令中使用的元素内部时，单击不注册

1 个答案: