在 angularjs 指令中初始化 jquery 插件答案

【问题标题】：Initializing jquery plugins in angularjs directives在 angularjs 指令中初始化 jquery 插件
【发布时间】：2013-05-28 18:50:28
【问题描述】：

我不确定以前是否有人问过这个问题，但我浏览了很多有角度的 2 路装订柱，坦率地说无法理解他们在说什么。所以我就再次陈述我的问题。

假设我想使用标签输入插件，例如this。我定义了一个称为标签的角度指令，并在其中初始化文本输入上的标签输入。文本元素绑定到从服务填充到控制器中的模型。

我在 Plunker 中有这个 here.

问题是当指令加载时，模型还没有被填充，所以 tagsinput 插件被初始化为一个空值。但我希望它用服务器端值初始化。我经常遇到这个问题，我一直在诉诸于在控制器内的服务回调中初始化我的插件，我知道这是大罪。

我无法摆脱这样的想法，最终，在某种程度上，插件初始化必须延迟到服务返回，以便值可用。如果我说即使以有角度的方式做到这一点，我是否正确？但无论如何，我无法弄清楚如何让它发挥作用。

【问题讨论】：

标签： angularjs angularjs-directive

【解决方案1】：

我认为解决此问题的最佳方法是在指令中使用观察者。

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

app.controller('Main', function ($scope, $timeout) {

   //this simulates data being loaded asynchronously after 3 second 
   $timeout(function () {
       $scope.list = [1, 2, 3, 4];
   }, 3000);

});

app.directive("mydirective", function()
{   
    return {
        restrict: "A",
        link: function(scope, element, attrs)
        {
            scope.$watch('list', function (newVal, oldVal) {
                if (newVal) {

                    //initialize the plugns etc
                    scope.result = 'Model has been populated';
                }    
            });
        }
    };
});

在我的示例中，我在控制器中使用 $timeout 来模拟数据的异步加载，一旦填充了“列表”模型，指令中的观察者就会意识到它（newVal 不是空的或未定义的），然后是插件可以初始化。这是一种更好的方法，而不是控制器内部的回调，因为您的代码更加简洁。

这是jsBin

编辑：

请记住，在填充模型时必须触发摘要循环。如果您使用 $resource 或 $http 从服务器获取数据，则不必担心，但如果您在 Angular 之外执行此操作，则必须使用 $scope.$apply() 触发摘要循环，因此观察者可以知道模型已填充。

【讨论】：

【解决方案2】：

正如 Bertrand 所说，可以通过在指令 link 函数中使用观察者来实现。您需要等待数据出现，这就是观察者的用途。在http://plnkr.co/edit/hb3UYl 处查看我对您的 plunker 的更新。

我用$timeout 而不是$http 伪造了异步响应，但这并不重要。

它的作用是在指令的链接函数中设置观察者来寻找$scope.list 的变化。如果检测到更改并且newValue 有用，它会使用它来填充输入字段并将其转换为标签列表。

请注意，我将您的 $('.taginput') 更改为 element，因为这是您正在操作的内容。此外，我认为这是搜索您只想在当前element 的层次结构中操作的 DOM 元素的好习惯。这可以确保如果您在给定元素上放置指令 - 除此元素及其子元素外，不会影响其他元素。

【讨论】：