Angularjs 大量以jquery为中心的Dom工作在指令链接函数中进行-这是错误的吗？

我正在写我的第一个指令——一个简单的弹出框，在鼠标上方（或触摸屏上）显示一些内容。看起来我的link函数基本上是一些功能的包装器，否则我会直接插入jquery世界中的一个函数。这是正确的吗？想知道是否有一种更以角度为中心的方法来实现这一点

---

我的两分钱，我建议让你的html更具声明性。尝试将视图表示为模型，并在链接函数中初始化模型

作为一个例子，考虑下面的HTML片段

<div ng-class="{ 'fade-in': showResults, 'fade-out': !showResults }"></div>

在你的链接功能。这样做会使视图更具声明性，而不是在DOM上操作，而是将DOM表示为视图模型并在视图模型上操作

---

希望这能有所帮助。

我的两分钱，我建议您让html更具声明性。尝试将视图表示为模型，并在链接函数中初始化模型

作为一个例子，考虑下面的HTML片段

<div ng-class="{ 'fade-in': showResults, 'fade-out': !showResults }"></div>

在你的链接功能。这样做会使视图更具声明性，而不是在DOM上操作，而是将DOM表示为视图模型并在视图模型上操作

---

希望这对您有所帮助。

在使用Angular时，您应该试着忘记jQuery。您可以使用@swazza85建议的

ng类

，而不是像您那样添加类，或者只使用现成的指令

ng show

、

ng hide

、

ng mouseover

或

ng touch

实现你现在所拥有的最快最简单的方法是

<div ng-mouseover="show = true" ng-mouseleave="show = false">Some text</div>
<div ng-show="show">Initially hidden</div>

JavaScript

app.controller('Ctrl', function() {
  this.val1 = 'Touch or move mouse over the label';
  this.val2 = '...I haz appeared!!1';
});

app.directive('pop', function() {
  return {
    restrict: 'E',
    scope: { 
      content: '=', 
      hover: '='
    },
    template: '<div ng-mouseover="toggle(true)" ng-mouseleave="toggle(false)">' +
              '  <h4><span class="label label-default">{{ content }}</span></h4>' +
              '</div>' + 
              '<div ng-show="show" class="alert alert-info">{{ hover }}</div>',
    link: function(scope, element) {
      scope.toggle = function(val) {
        scope.show = val;
      };

      element.bind('touchstart', toggle, true);
      element.bind('touchend', toggle, false);
    }
  };
});

app.controller（'Ctrl'，function（）{
this.val1='在标签上触摸或移动鼠标'；
this.val2='…我的haz出现了！！1'；
});
app.directive（'pop'，function（）{
返回{
限制：'E'，
范围：{
内容：“=”，
悬停：'='
},
模板：“”+
“{{content}}”+
'' + 
“{{hover}}}”，
链接：功能（范围、元素）{
scope.toggle=函数（val）{
scope.show=val；
};
元素绑定（'touchstart'，toggle，true）；
元素绑定（'touchend'，toggle，false）；
}
};
});

---

这里的相关plunker

在使用Angular时，您应该试着忘记jQuery。您可以使用@swazza85建议的

ng类

，而不是像您那样添加类，或者只使用现成的指令

ng show

、

ng hide

、

ng mouseover

或

ng touch

实现你现在所拥有的最快最简单的方法是

<div ng-mouseover="show = true" ng-mouseleave="show = false">Some text</div>
<div ng-show="show">Initially hidden</div>

JavaScript

app.controller('Ctrl', function() {
  this.val1 = 'Touch or move mouse over the label';
  this.val2 = '...I haz appeared!!1';
});

app.directive('pop', function() {
  return {
    restrict: 'E',
    scope: { 
      content: '=', 
      hover: '='
    },
    template: '<div ng-mouseover="toggle(true)" ng-mouseleave="toggle(false)">' +
              '  <h4><span class="label label-default">{{ content }}</span></h4>' +
              '</div>' + 
              '<div ng-show="show" class="alert alert-info">{{ hover }}</div>',
    link: function(scope, element) {
      scope.toggle = function(val) {
        scope.show = val;
      };

      element.bind('touchstart', toggle, true);
      element.bind('touchend', toggle, false);
    }
  };
});

app.controller（'Ctrl'，function（）{
this.val1='在标签上触摸或移动鼠标'；
this.val2='…我的haz出现了！！1'；
});
app.directive（'pop'，function（）{
返回{
限制：'E'，
范围：{
内容：“=”，
悬停：'='
},
模板：“”+
“{{content}}”+
'' + 
“{{hover}}}”，
链接：功能（范围、元素）{
scope.toggle=函数（val）{
scope.show=val；
};
元素绑定（'touchstart'，toggle，true）；
元素绑定（'touchend'，toggle，false）；
}
};
});

---

这里的相关Plunk

是的，这很有帮助，并且在显示/隐藏函数中消除了Dom manip。不要认为有任何方法可以消除事件侦听器…还想弄清楚，我是否可以使用指令中的模板功能注入类似于上面所述的内容（使用ng类的位）？…只是想将html中所需的工作保持在最低限度。是的，您可以在部分视图中包含html，并在“templateUrl”属性中指定指向该部分视图的url，而不是使用“template”属性。至于angular（例如，ngClick、ngMouseover等）尚未涉及的绑定DOM事件，我认为el.bind是一种可行的方法。是的，这很有用，而且它在show/hide函数中消除了DOM manip。不要认为有任何方法可以消除事件侦听器…还想弄清楚，我是否可以使用指令中的模板功能注入类似于上面所述的内容（使用ng类的位）？…只是想将html中所需的工作保持在最低限度。是的，您可以在部分视图中包含html，并在“templateUrl”属性中指定指向该部分视图的url，而不是使用“template”属性。至于angular（ex-ngClick、ngMouseover等）尚未涵盖的绑定DOM事件，我认为el.bind是一个不错的选择。非常好的答案，谢谢，从中我们学到了很多！我一直在根据Swazza85的答案进行修改，但这填补了我的空白。非常好的答案，谢谢，从中我学到了很多！我一直在根据Swazza85的答案进行修改，但这填补了我的空白。