关于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;
            };
        }
    };
});

Reference:

https://my.oschina.net/mumu/blog/325284