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