0

我们为一大堆 UI 购买了一些 CSS。它包括选项卡、向导和模式等内容。模板经常使用 JQuery 来进行渲染。我读过的所有关于 Angular 的帮助都不鼓励 JQuery，我们应该尝试用 Angular 来做。不幸的是，这是一个 3rd 方工具，我们的团队已经在使用它了。

我们有很多显示网格的屏幕。该页面包括一个“添加新”按钮和一个“编辑”按钮，用于显示在网格上的每一行。当用户单击“添加新”按钮时，我们需要显示一个允许他捕获新实体（无论它是什么）的模式。当用户单击“编辑”时，它会打开一个类似的模式并填充字段。

需要通过对他的插件的一些 JQuery 调用来打开模式。我是否可以在控制器中使用带有 Angular 的 JQuery，以便我可以打开主题的模式。我只会使用 JQuery。其余的我会尽可能地坚持有角度的方式。

4

3 回答 3

2

首先，不禁止将 jQuery 与 AngularJS 一起使用。强烈建议您尽可能小心地使用它，因为您将失去一些通常不需要编码的数据绑定和事件功能。

当您使用 3rd-party 时，您有三个选择。

  1. 您可以使用已经存在的桥，例如 Bootstrap 的桥：( http://angular-ui.github.io/bootstrap/ )

  2. 您可以使用指令、监视、事件在您的 3rd 方插件和 AngularJS 之间建立您需要的桥梁，并确保scope.$apply()在适当的位置调用。举个例子：

    <div data-modal title="Header">Content</div>

    $(element).modal()如果您想简化，可以通过调用并将模板应用于 HTML 来自动创建您的模式。

  3. scope.$apply()当您使用第三方时，您可以停止在乎并在需要时打电话。从长远来看，这可能不是您的最佳解决方案，但如果您没有时间编写桥接器或者您永远不会重用它，那么这不是世界末日。

第三个选项始终存在，但除非别无选择，否则不要使用它。除非已经编写了可靠的代码，否则开发一个简单的指令并添加功能是最好的方法。当你习惯它时，它非常容易。

于 2013-08-26T11:23:39.597 回答
1

在 Angular UI 中，他们提供了可以检查的规定（jQuery Passthrough - 调用元素上指定的 jQuery 函数或插件）@ http://angular-ui.github.io/ui-utils/

因为他们展示了如何在几乎没有工作的情况下调用引导工具提示

于 2013-08-26T10:44:13.043 回答
0

编写您的自定义指令，在指令范围内发送每行的数据，并在您的指令中调用 jQuery 函数。

我在实际项目中使用这种方式

UPD

'use strict';

angular.module('yourApp')
.directive('directiveName', function ($parse) {
    return {
        restrict: 'E',
        scope: { params: '=' },
        template: '<div></div>',
        replace: true,
        transclude: true,
        link: function ($scope, element, attrs) {

            var model = $scope.params,
                options = model.getData(),
                out;

            var ms = element.magicSuggest({       //I use jQuery function magicSuggest
                //some params for jQuery function
            });

            $(ms).on('selectionchange', function (event, combo, selection) {
                //use events with my element
            });

        }
    }
});
于 2013-08-26T10:50:18.543 回答