Question

我正在尝试使用ngBind从AngularJS控制器为Bootstrap Switch单选按钮（http://www.bootstrap-switch.org/）插入HTML。我运行

时已经在HTML中工作的Bootstrap Switch单选按钮

$（ 'BS-开关。'）bootstrapSwitch（）;

但是我通过ngBind插入HTML的单选按钮保留了一个简单的单选按钮。我认为这是一个时间问题。

示例：

HTML：

<!-- this doesn't get converted to a Bootstrap Switch radio button -->
<div ng-bind-html="exampleHTML"></div>

<!-- this does get converted -->
<input type="checkbox" class="bs-switch" name="my-checkbox2" checked>

控制器：

$scope.exampleHTML = $sce.trustAsHtml(
       '<input type="checkbox" class="bs-switch" ' +
       '       name="my-checkbox1" checked>'
);

$('.bs-switch').bootstrapSwitch();

如果我在控制器中执行以下操作，则通过ngBind插入的单选按钮会转换为自举开关 - 这就是为什么我认为这是一个时间问题：

$scope.exampleHTML = $sce.trustAsHtml(
    '<input type="checkbox" class="bs-switch" ' +
    '       name="my-checkbox1" checked>'
);

setTimeout(function() {
    $('.bs-switch').bootstrapSwitch();
}, 1000);

有关如何执行此操作的任何建议（以比使用超时更好的方式）？我正在尝试构建一个从JSON配置文件以编程方式生成的动态表单，这就是我使用ngBind插入HTML的原因。

更新

这是JSFiddle example

Answer 1

好的，这似乎有效：

'use strict';

var myApp = angular.module('myApp', [
    'ngSanitize'
]);

myApp.controller('myController', ['$scope', '$sce',
    function($scope, $sce) {

        // from https://stackoverflow.com/questions/29093229/how-to-call-function-when-angular-watch-cycle-or-digest-cycle-is-completed
        var hasRegistered = false;
        $scope.$watch(function() {
            if (hasRegistered) return;
            hasRegistered = true;
            $scope.$$postDigest(function() {
                hasRegistered = false;
                $('.bs-switch').bootstrapSwitch();
            });
        });

        $scope.exampleHTML = $sce.trustAsHtml(
            '<input type="checkbox" class="bs-switch" ' +
            '       name="my-checkbox2" checked>'
        );

    }
]);

https://jsfiddle.net/billb123/nnkypoy9/19/

这是基于以下Stack Overflow问题：

how to call function when angular watch cycle or digest cycle is completed

Answer 2

不要在控制器内部操纵DOM，而是使用指令：

<div ng-app="myApp">
    <div ng-controller="myController">
        <switch></switch>
    </div>  
</div>  

var myApp = angular.module('myApp', []);

myApp.controller('myController', ['$scope',
    function($scope) {

    }
]).directive('switch', function() {
    return {
        restrict: 'E',
        'template': '<input type="checkbox" class="bs-switch" name="my-checkbox1" checked>',
        'link': function(scope, element, attrs) {
            $(element).find('input').bootstrapSwitch();
        }
    }
});

小提琴https://jsfiddle.net/nnkypoy9/23/

AngularJS - ngBind和Bootstrap Switch

2 个答案: