Angularjs 开关不存在'；不能使用角度UI路由

我正在Angular中开发一个应用程序，使用Angular UI路由和一个UI插件，该插件具有基于引导开关的“复选框开关”

问题是模板是在shell页面之后加载的，该页面会打断开关，并且它们显示为普通复选框。请注意，复选框被包装在父div中，类为“switch”，以便正确显示

我的愿望是创建一个全局解决方案，而不必为每个开关添加属性

以下是迄今为止应用程序的一个Plunker：

我刚刚开始学习Angular，所以我很欣赏非常具体的答案。谢谢

HTML:

文件：

---

不要使用jquery进行切换，而是：

<div class="switch" data-ng-controller="myController">
    <input type="checkbox" ng-model="myCheckbox">
</div>

<button ng-click="switch()">Switch programmatically</button>

<script type="text/javascript">

    angular.module('myApp')
    .controller('myController', ['$scope', '$timeout', function($scope, $timeout){
        $scope.myCheckbox = false; // initialise the checkbox to unchecked

        $timeout(function(){ // switch to checked 3 seconds later
            $scope.myCheckbox = true;
        },3000);

        $scope.switch = function(){
            $scope.myCheckbox = !$scope.myCheckbox;
        };
    }]);

</script>

以编程方式切换
angular.module（'myApp'）
.controller（'myController'，['$scope'，'$timeout'，函数（$scope，$timeout）{
$scope.myCheckbox=false；//将复选框初始化为未选中
$timeout（函数（）{//3秒后切换到选中状态
$scope.myCheckbox=true；
},3000);
$scope.switch=函数（）{
$scope.myCheckbox=！$scope.myCheckbox；
};
}]);

angularjs应用程序中的DOM操作（来自angularjs常见问题解答）：

停止尝试使用jQuery修改控制器中的DOM。真正地这包括添加元素、删除元素、检索它们的内容、显示和隐藏它们。使用内置指令，或在必要时编写自己的指令来执行DOM操作。有关复制功能，请参见下文

<>如果你正在努力打破习惯，考虑从你的应用程序中删除jQuery。真正地Angular有$http服务和强大的指令，这使得它几乎总是不必要的。Angular捆绑的jQLite有一些最常用于编写Angular指令的特性，特别是绑定到事件的特性

我还向您推荐这些关于该主题的优秀资源：

• 关于堆栈溢出
• 在youtube上

---

您是否尝试将开关类直接添加到输入中？是。我只是作为一个巨大的开关出现。我应该以它为例。我还为交换机的文档添加了一个url；在document.readyYes中，问题是我使用的是Angular UI路由，它在shell页面之后加载子页面，因此我需要在加载子页面时手动初始化这些特殊元素。尝试这样调用

$（“.switch”，$event.currentTarget）

谢谢！我没有收到任何脚本错误，但什么也没发生。请注意，我使用的是基于jQuery的特定框架，我必须使用它，因此开关的外观和行为必须与我只使用jQuery.Yes时相同。Jquery和angularjs并非不兼容，但它们的关联需要谨慎。我为你提供了一些额外的资源。但是，如果什么都没有出现，这可能是另一个问题。您可以发布一个JSFIDLE、codepen或其他复制您的问题吗？嗨，我在没有您建议的代码的情况下设置了一个Plunker:。对于jquery表单，请验证并选择我使用范围的2个选择框。$evalAsync

$(".switch").switch();

<div class="switch" data-ng-controller="myController">
    <input type="checkbox" ng-model="myCheckbox">
</div>

<button ng-click="switch()">Switch programmatically</button>

<script type="text/javascript">

    angular.module('myApp')
    .controller('myController', ['$scope', '$timeout', function($scope, $timeout){
        $scope.myCheckbox = false; // initialise the checkbox to unchecked

        $timeout(function(){ // switch to checked 3 seconds later
            $scope.myCheckbox = true;
        },3000);

        $scope.switch = function(){
            $scope.myCheckbox = !$scope.myCheckbox;
        };
    }]);

</script>