javascript - AngularJS 在使用 ng-switch 渲染后执行

Question

我创建了一个隐藏和显示“页面”的 ng-switch，对于一些我需要运行 jQuery 选择器函数的元素。但是因为 Angular 会销毁并创建用于呈现的元素，所以我需要一种重新应用此 jquery 选择器函数的方法。

我的第一次尝试只是在元素中包含一个标记，但它只在页面第一次呈现时执行。

更新:

HTML:

<wizard-step ng-switch-when="customer">
    <h1>Customer Details</h1>

    <div class="step-content">
        <form role="form">
            <div class="form-group float-label-control">
                <label for="first_name">First Name</label>
                <input type="email" class="form-control" placeholder="First Name" name="first_name" ng-model="currentCase.customer.first_name">
            </div>
            <div class="form-group float-label-control">
                <label for="">Last Name</label>
                <input type="text" class="form-control" placeholder="Last Name">
            </div>
            <div class="form-group float-label-control">
                <label for="">Textarea</label>
                <textarea class="form-control" placeholder="Textarea" rows="1"></textarea>
            </div>
        </form>
    </div>
    <div class="btn-group">
        <input type="submit" ng-click="previousStep()" value="&laquo; Pending Cases " class="btn btn-warning" />
        <input type="submit" ng-click="nextStep()" value="Products &raquo;" class="btn btn-info" />
    </div>

    <script>
        if (window.jQuery) {
            $('.float-label-control').floatLabels();
        }
        console.log('float trigger');
    </script>
</wizard-step>

jQuery:

$('.float-label-control').floatLabels();

Answer 1

这似乎不适用于文本区域，但我在这里使用了代码:

http://clubdesign.github.io/floatlabels.js/

创建这个:

http://plnkr.co/edit/DH3zdvoCwAFOxc4pahkI?p=preview

关键部分是定义一个指令:

directive("floatLabels", function(){
  return {
    restrict: "A",
    link:function(scope, iElem, iAttrs){
      iElem.floatlabel()
      console.log(iElem)
    }
  }
})

应用该指令:

<input
   type="text"
   class="form-control"
   placeholder="Last Name"
   float-labels/>