0

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

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

我在 Plunker这里有这个。

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

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

4

2 回答 2

2

我认为解决这个问题的最好方法是在你的指令中使用一个观察者。

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() 触发摘要循环，因此观察者可以知道模型已填充。

于 2013-05-28T19:39:35.053 回答
1

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

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

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

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

于 2013-05-28T20:16:33.227 回答