Question

我已经创建了一个ng-switch来隐藏和显示＆＃34;页面＆＃34;，对于我需要运行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

这似乎不适用于textarea，但我在这里使用了代码：

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/>

Answer 2

我不确定下面的代码是否有效，但让我解释其背后的原因。正如shaunhusain在评论中提到的，如果您创建一个指令并将其放在ng-switch中，它将在ng-switch之后处理。所以现在你有办法知道在处理ng-switch之后你的jquery正在执行。您的指令可能希望转换一些标记，因此您不必每次都限制使用相同的模板。

现在创建指令:(可能有一两个错字，但我希望它有所帮助！）

angular.module('myModule', [])
.directive('myDirective', function() {
    return {
        restrict: 'E',
        transclude: true,
        template: '<div class="step-content">' + '<form role="form">' + '<div ng-transclude></div>' + '</form>' + '</div>',
        ,
        link: function(scope, el, attr) {
            $('.float-label-control').floatLabels();
        }
    };
});


<myDirective>

<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>

</myDirective>

使用ng-switch渲染后，AngularJS执行

2 个答案: