javascript - 将 Angular DI 与 Modernizr、lodash 和 jquery 插件等库一起使用的最佳实践是什么？

Question

我注意到将第三方脚本包装在 Angular js 提供程序中以进行依赖项注入(inject)并不常见，我不确定为什么。我是 Angular 的新手，我试图找出使用 jquery 插件、lodash、modernizr 等来利用 DI 的最佳方法...

考虑我发现的这个例子:

var App = angular.module('Toolbar', []);

App.directive('toolbarTip', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            $(element).toolbar(scope.$eval(attrs.toolbarTip));
        }
    };
});

http://jsfiddle.net/codef0rmer/TH87t/

这似乎工作得很好，但是为工具栏提示 jQuery 插件创建一个值、常量或其他提供程序会比将其注入(inject)到指令中更好吗？此外，如果该指令需要 jQuery(而不是 jQlite)，是否应该将其包装在提供程序中并注入(inject)？

与 modernizr 和 lodash 类似，这会被认为是使用这些库进行 DI 的最佳方式吗？

使用 Modernizr:

angular.module('someApp', [])


.provider('Modernizr', function () {
    this.$get = function () {
        return Modernizr || {};
    };
})

.factory('cgEvents', function(Modernizr) {
    return {
        buttonPressedEvent : function() {
            if ( Modernizr.touch ) {
                return 'touchstart';
            } else {
                return 'click';
            }
        }
    };
})

使用 lodash:

angular.module('someApp', [])

.factory('_', function() {
    return window._; // assumes lodash has already been loaded on the page
});

.directive('cgFillViewPort', function (_) {
    return {
        restrict: 'A',
        link: function(scope, $elm) {

            var resizer = function() {
                //code fired on resize...
            };

            $(window).resize( _.throttle( resizer, 100 ));
        }
    };
})

这是使用依赖注入(inject)的有效方式吗？对此有任何见解将不胜感激!

Answer 1

我认为你走在正确的道路上。到目前为止，我一直在做同样的事情并且工作正常(但随着我的应用程序变大，我将重构我的代码以使用 requirejs。不过请记住，jquery 可能会导致 Angular 内存泄漏。因为 AngularJS 应用程序是单页的应用程序和 jquery 对象在 Angular 范围之外，即使路由发生变化，它们也不会被销毁!所以当 $destroy 事件被触发时，请小心删除指令中的 jquery 引用。

有关此问题的更多详细信息 here .