关于angularjs中的jQuery
关于angularjs中的jQuery
下面是一个小例子，用来说明我经常看到的一种模式。我们需要一个开关型的按钮。（注意：这个例子的代码有点装逼，并且有点冗长，只是为了用来代表更加复杂一些的例子，这些例子通常是以与此相同的方式来解决的。）
.directive( 'myDirective', function () {
return {
template: '<a class="btn">Toggle me!</a>',
link: function ( scope, element, attrs ) {
var on = false;
$(element).click( function () {
if ( on ) {
$(element).removeClass( 'active' );
}
else {
$(element).addClass( 'active' );
}
on = !on;
});
}
};
});
这段代码里面有很多错误的地方。
第一，jQuery从来就不是必须的。我们这里要实现的东西实际上完全不需要jQuery！
第二，即使我们已经在页面上引入了jQuery，也没有必要在这里去使用；对于没有使用jQuery的项目，我们可以简单地使用angular.element，这样一来我们的组件同样能够很好地运行。
第三，假设这里必须使用jQuery我们的指令才能运行，jqLite(angular.element)总是会自动使用jQuery，如果jQuery已经加载了话！所以我们不需要使用$，我们只要使用angular.element就可以了。
第四，与第三点类似，jqLite元素没有必要使用$来进行包装，传递给link函数的element已经是一个jQuery元素了！
还有第五点，这一点我们在前面的小节中没有提到，那就是我们为什么要把模板相关的内容混合在我们的代码逻辑里面？
以上指令可以重写成下面这样（即使对于非常复杂的情况同样可以改写！），改写之后代码极其简单：
.directive( 'myDirective', function () {
return {
scope: true,
template: '<a class="btn" ng-class="{active: on}" ng-click="toggle()">Toggle me!</a>',
link: function ( scope, element, attrs ) {
scope.on = false;
scope.toggle = function () {
scope.on = !$scope.on;
};
}
};
});
