Javascript AngularJS-ngBind和引导开关

我正在尝试使用ngBind从AngularJS控制器插入引导开关单选按钮（）的HTML。启动开关单选按钮已经在HTML工作时，我运行

$（'.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();

控制器：

<!-- 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();

$scope.exampleHTML=$sce.trustAsHtml(
''
);
$（'.bs开关'）.bootstrapSwitch（）；

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

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

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

$scope.exampleHTML=$sce.trustAsHtml(
''
);
setTimeout（函数（）{
$（'.bs开关'）.bootstrapSwitch（）；
}, 1000);

有没有关于如何做到这一点的建议（以比使用超时更好的方式）？我试图构建一个动态表单，它是从JSON配置文件以编程方式生成的，这就是为什么我要使用ngBind插入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();

---

下面是一个

确定，这似乎起作用：

'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>'
        );

    }
]);

“严格使用”；
var myApp=angular.module（'myApp'[
“消毒”
]);
myApp.controller（'myController'，['$scope'，'$sce'，'，
功能（$scope，$sce）{
//从https://stackoverflow.com/questions/29093229/how-to-call-function-when-angular-watch-cycle-or-digest-cycle-is-completed
var=false；
$scope.$watch（函数（）{
如果（已注册）申报表；
hasregisted=true；
$scope.$$postDigest（函数（）{
hasregisted=false；
$（'.bs开关'）.bootstrapSwitch（）；
});
});
$scope.exampleHTML=$sce.trustAsHtml(
''
);
}
]);

这是基于以下堆栈溢出问题：

---

不要在控制器内操作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();
        }
    }
});

var myApp=angular.module（'myApp'，[]）；
myApp.controller（'myController'，['$scope'，'，
职能（$范围）{
}
]).directive（'switch'，function（）{
返回{
限制：'E'，
“模板”：“，
“链接”：函数（作用域、元素、属性）{
$（元素）.find（'input'）.bootstrapSwitch（）；
}
}
});

---

Fiddle

为什么必须以这种方式插入HTML？Angular的口头禅不是从控制器操纵DOM。你能发布一个plunkr或什么吗？但我假设你想捕获复选框选中的事件或更改，然后隐藏复选框并显示bs switch指令？BjornJohnson-我这样做的原因是因为我想从JSON数据动态构建表单。话虽如此，我看不到任何其他方法可以做到这一点，是吗？Jony-Y：这里有一个JSFIDLE示例：您可以在DOM就绪函数

$（function（）{$（'.bs switch'）.bootstrapSwitch（）；}）中添加对
.bootstrapSwitch（）
的调用吗。