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

【问题标题】：Applying jquery plugin to new item in angularJS ng-repeat将jquery插件应用于angularJS ng-repeat中的新项目
【发布时间】：2013-12-06 05:28:57
【问题描述】：

您好，我有一个使用 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()" 选择器将插件应用到最后一项。

对吗？？一切正常，但看起来不太好。

【问题讨论】：

那么通知是否添加？
已检查您的代码。 1. textarea 结束标签丢失。 2.检查错误控制台中的错误。如果有的话。

标签： javascript jquery angularjs twitter-bootstrap

【解决方案1】：

这是指令的绝佳候选者。请参阅角度指令here 的更详细说明。当您必须以某种方式修改 DOM 时，您应该在指令中进行。控制器访问和修改 DOM 被认为是一种不好的做法，它应该与范围一起工作。

所以在你的情况下你可以创建一个简单的指令

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

在你的视图中你可以像这样使用这个指令

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

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

【讨论】：