javascript - executing jQuery function after ng-repeat - Stack Overflow

admin管理员组

文章数量:1291121

Thanks in advance for your help. I'm using this tagmanager in my web application. The jQuery function works FINE until this

<input type="text" name="tags" placeholder="Tags" class="tagsManager" />

Is placed under

ng-repeat = "(key,val) in client_proj"

Here is a short snippet of the code

<div class="accordion-group" ng-repeat="(key,val) in client_proj"><!--For Every Project in Project List-->
  <div class="accordion-heading" style="background-color:#EFF8FB">
    <a class="accordion-toggle" data-toggle="collapse" data-parent="#mainAccordion" href="#{{val.id}}" ng-click="disableEditor()">
      <div align="center">{{val.title}}</div>
    </a>
  </div>
  <div id="{{val.id}}" class="accordion-body collapse">
    <div class="accordion-inner" style="font-size:12px; background-color:white">
      <strong>Technologies Exposure:</strong><br/>
      <div ng-hide="editorEnabled">{{val.exposure}}</div>
      <div ng-show="editorEnabled">
        <textarea ng-show="editorEnabled" class="span12" ng-model="val.exposure" rows="12" style="resize:vertical"></textarea>
        <input type="text" name="tags" placeholder="Tags" class="tagsManager" />

It appears as a normal input without doing any of its functions like creating a new tag after pressing, or enter.

Can anyone tell me what's happening?

Thanks in advance for your help. I'm using this tagmanager in my web application. The jQuery function works FINE until this

<input type="text" name="tags" placeholder="Tags" class="tagsManager" />

Is placed under

ng-repeat = "(key,val) in client_proj"

Here is a short snippet of the code

<div class="accordion-group" ng-repeat="(key,val) in client_proj"><!--For Every Project in Project List-->
  <div class="accordion-heading" style="background-color:#EFF8FB">
    <a class="accordion-toggle" data-toggle="collapse" data-parent="#mainAccordion" href="#{{val.id}}" ng-click="disableEditor()">
      <div align="center">{{val.title}}</div>
    </a>
  </div>
  <div id="{{val.id}}" class="accordion-body collapse">
    <div class="accordion-inner" style="font-size:12px; background-color:white">
      <strong>Technologies Exposure:</strong><br/>
      <div ng-hide="editorEnabled">{{val.exposure}}</div>
      <div ng-show="editorEnabled">
        <textarea ng-show="editorEnabled" class="span12" ng-model="val.exposure" rows="12" style="resize:vertical"></textarea>
        <input type="text" name="tags" placeholder="Tags" class="tagsManager" />

It appears as a normal input without doing any of its functions like creating a new tag after pressing, or enter.

Can anyone tell me what's happening?

• javascript
• jquery
• angularjs

Share Improve this question Follow edited Jul 13, 2016 at 7:56 Nhan 3,90566 gold badges3434 silver badges4040 bronze badges asked Mar 3, 2013 at 8:47 user1166085user1166085 62733 gold badges1313 silver badges2525 bronze badges 3

• I assume it's because the content of ng-repeat is not present when the jQuery plugin runs. My suggestion is that you use a custom directive. I feel like anytime you need to write specific scaffolding html/css a directive is better suited. You have better control over rendering + behaviour – Liviu T. Commented Mar 3, 2013 at 10:47
• does it mean that i can't use the jquery tagmanager but instead have to create my own? im confused. – user1166085 Commented Mar 3, 2013 at 12:37
• initialize the jQuery plugin from within the suggested directive. – charlietfl Commented Mar 3, 2013 at 14:04

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

1.Create a custom directive that acts as a wrapper for your jQuery plugin:

angular.module('<YOUR APP OR MODULE>').directive('tagsManager', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            element.tagsManager();
            //whatever other logic would go here
        }
    };
});

Then remove the automatic initialization of tabsManager (something like $('<SELECTOR>').tagsManager(); or jQuery('<SELECTOR>').tagsManager(); ) from your script

Ultimately, in your ng-repeat, add the directive to the input element (optionally add other attributes -- you might have to program the behavior for these attributes within your directive -- if they are required)

<input tags-manager>

This will make AngularJS initialize tabsManager on your inputs (via the custom directive) after they are rendered in the DOM.

Makes sense?

本文标签： javascriptexecuting jQuery function after ngrepeatStack Overflow