jQuery和AngularJS的区别浅析

.directive( 'myDirective', function () {
    return {
        template: '<a class="btn">Toggle me!</a>',
        link: function ( scope, element, attrs ) {
            var on = false;
 
            $(element).click( function () {
                on = !on;
                $(element).toggleClass('active', on);
            });
        }
    };
});

在以上例子中存在以下错误：

1.首先，jQuery是不必要的，这里的工作完全不需要jQuery！

2.第二，即使我们已经在页面中引入了jquery,但是我们没有理由去使用它，我们可以使用angular.element而我们的组件也能够运行，即使这个项目中没有引入jQuery。

3.第三，假设jquery是需要的在我们的指令中，我们可以使用jqLite去进行替代，只要引入jQuery即可，所以我们不必使用$而是使用angular.element;

4.第四，和第三点联系很紧密，jqLite元素不必使用$包裹起来，element元素传递到link函数中已经是一个jQuery对象了；

5.第五，我们之前已经说过，为什么不将我们的模板和逻辑混合起来呢?

以上指令可以按照如下方式来重写，即使在最复杂的情况下看起来也如此简单。

.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;
            };
        }
    };
});

模板元素是在 template属性中，你可以很容易替换掉它的style，而逻辑根本不用发生变化，达到了完全复用！

还有其他的好处，比如测试起来很简单，不管模板里面是什么，指令API都不会发生改变，所以重构它很简单。你可以随意多次改变你的模板而不用改变指令，无论你怎么改变，你的测试总能通过！

 6/7   首页 上一页 4 5 6 7 下一页 尾页