Question

我的控制器中有一个操作DOM的函数。我理解这是一个不好的做法，DOM操作应该转移到一个指令中。我无法将其从控制器中拉出并进入自己的指令。

我的控制器中有以下示例代码：

$scope.sidebarToggle = function() {
  if ($scope.request = null) {
    $(#container).switchClass('bottom', 'top', 400, 'linear');
    $scope.editing = true;
  }
  else {
    $(#container).switchClass('top', 'bottom', 400 'linear');
    $scope.editing = false;
  {
};

以上代码如果条件非常简单，在实时代码中有多个条件。否则，可能会出现ng-show / hide指令。

代码的目的是识别用户所处的状态，显示/隐藏屏幕外侧边栏（班级分配），并设置“编辑”。控制器的状态。

如何将其重构为指令以实现相同目标？

Answer 1

您可能不需要为此创建自己的指令。

Angular已经创建了一些可以帮助你的指令。

在您的情况下，您应该使用angular指令：ng-show和ng-class或ng-style

例如：

HTML

<div ng-show="request == null"> Edit </div>
<div ng-class="{'class-top': request == null,'class-bottom' : request != null}"> <div>

CSS：

.class-top{
...
}
.class-bottom{
...
}

让我知道它是否适合你，

尼科

Answer 2

试试这个：

app.directive('test', function() {
  return {
    restrict: 'E',
    scope: {

    },
    link: sidebarToggle
  };
});

我认为它正在创建一个指令并链接到您的函数sidebarToggle

将功能从控制器移动到指令

2 个答案: