Question

我注意到在角度js提供程序中包含第三方脚本以进行依赖注入并不常见，我不确定原因。我是棱角分明的新手，试图找出利用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插件创建值，常量或其他提供程序比将其注入指令更好吗？此外，如果此指令需要jQuery（而不是jQlite），是否应将其包装在提供程序中并注入？

与modernizr和lodash类似，这会被认为是appraoch 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 ));
        }
    };
})

这是使用依赖注入的有效方法吗？任何有关这方面的见解将不胜感激！

Answer 1

我认为你正走在正确的道路上。到目前为止，我一直在做同样的工作并且工作正常（但随着我的应用程序变得越来越大，我将重构我的代码以使用requirejs。但请记住，jquery会导致角度内存泄漏。因为AngularJS应用程序是单一的-page应用程序和jquery对象超出了角度范围，即使路径发生变化也不会被破坏！所以当$destroy事件被触发时，请小心删除指令中的jquery引用。

有关此问题的更多详情here。

使用带有Modernizr，lodash和jquery插件等库的角度DI的最佳实践是什么？

1 个答案: