将jquery插件应用于angularJS ng repeat中的新项目

Applying jquery plugin to new item in angularJS ng-repeat

本文关键字：repeat 新项目 ng angularJS jquery 插件 应用于      更新时间：2024-04-07

Hi我有一个小部件，它使用angular进行渲染，还有一个jquery引导插件来切换复选框。

<div class="notification" ng-repeat="notification in notifications">
    <textarea ng-model="notification.text">
    <div class="make-switch" data-on="success" data-off="danger">
        <input type="checkbox" ng-model="notification.status">
    </div>
</div>
<button ng-click="addNotification()">Add</button>

在第一次渲染时，页面加载时一切正常，但当我添加新的通知时，插件不会应用。这是合乎逻辑的。

var myAppModule = angular.module('myApp', []);
myAppModule.controller('NotificationController',function($scope,$timeout) {
    $scope.notifications = [
        {
            text:'text1.',
                status: true
        },
        {
            text:'Text2',
            status: false
        }
    ];
    $scope.addNotification = function(){
        var notification = {
            text: "",
            status: true
        }
        $scope.notifications.push(notification);
        $timeout(function(){
            $('.notification:last() .make-switch').bootstrapSwitch();
        })
    }
});

所以我使用$timeout和jquery"：last（）"选择器将插件应用到最后一项。

这是正确的吗？？一切正常，但看起来不太好。

这是一个很好的指令候选者。请参阅此处对角度指令的更详细解释。当您必须以某种方式修改DOM时，您应该在指令中进行修改。控制器访问和修改DOM被认为是一种糟糕的做法，它应该与作用域一起工作。

因此，在您的情况下，您可以创建一个简单的指令

directive('notificationSwitch', function () {
  return {
    restrict: 'A',
    link: function(scope, element) {
      element.bootstrapSwitch();
    }
  };
});

在你的视图中，你像一样使用这个指令

<div notification-switch data-on="success" data-off="danger">

这样，每次使用该指令添加新项时，都会调用它的链接函数，该函数将应用bootstrapSwitch

相关文章：