在angularjs指令中初始化jquery插件

我不確定這是否曾被問過，但我經歷了很多角度雙向綁定的帖子，坦白地說不明白他們在說什麼。所以我會再次陳述我的問題。在angularjs指令中初始化jquery插件

假設我想使用標籤輸入插件，如this。我定義了一個名爲tags的角度指令，並在其中初始化文本輸入上的tagsinput。文本元素綁定到從服務器填充到控制器中的模型。

我有這樣的Plunker here.

問題是，當指令負荷，該模型不填充呢，所以tagsinput插件與空值初始化。但我希望它用服務器端的值初始化。我經常遇到這個問題，我一直在使用控制器中的服務回調來初始化我的插件，我知道這是主要的罪過。

我無法想象，最終，在某種程度上，必須延遲插件初始化，直到服務返回，以便該值可用。如果我說，即使以這樣做的角度來看，這是不知何故實現的，我是否正確？但無論如何，我無法弄清楚如何使這個工作。

2013-05-28 akula1001

我認爲解決這個問題的最好方法是在你的指令中使用一個監視器。

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'; 
       }  
      }); 
     } 
    }; 
});

在我的例子，我使用$超時控制器內模擬數據的異步加載，一旦名單「模式被填充指令裏面的觀察者會發現它（的newval不爲空或未定義）然後插件可以被初始化。這是一種更好的方法，而不是控制器內的回調，因爲代碼更加簡潔。

這裏是一個jsBin

編輯：

只記得，摘要週期有填充模型時被解僱。如果您使用$ resource或$ http從服務器獲取數據，您不必擔心，但如果您在Angular之外執行此操作，則必須使用$ scope啓動摘要循環。$ apply（）觀察者可以意識到該模型已被填充。

來源

2013-05-28 19:39:35 Bema

正如Bertrand所說，它可以通過使用指令link函數中的監視器來實現。你需要等待數據出現，這是觀察者的目的。看看我的更新，在這裏http://plnkr.co/edit/hb3UYl。

我僞造了異步響應$timeout而不是$http，但在這裏並不重要。

它的作用是在指令的鏈接函數中設置監視器，查找$scope.list的更改。如果檢測到變化並且newValue是有用的，則使用它來填充輸入字段並將其變爲標籤列表。

注意我將$('.taginput')更改爲element，因爲這是您操作的內容。此外，我認爲這是一種很好的做法，可以搜索您想要操作的DOM元素，只能沿着當前的層次結構element。這使得你確信，如果你將指令放在給定的元素上 - 除了這個元素和它的子元素，其他元素都不會受到影響。

來源

2013-05-28 20:16:33

在angularjs指令中初始化jquery插件

回答

相關問題