交换机不支持Angular UI Routing

Question

我正在使用Angular UI Routing和一个UI插件开发一个基于自举开关的“复选框开关”的Angular应用程序。

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

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

这里是与应用至今一个Plunker： http://embed.plnkr.co/LRSGXqxjtbYcr6rjTj69/preview

我刚开始学习角，所以我明白，是相当具体的答案。谢谢！

HTML：

<div class="switch"> 
    <input type="checkbox"> 
</div> 

JS：

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

文档： https://tictail.com/developers/documentation/uikit/#Switches

Answer 1

不要使用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> 

在angularjs应用程序中的DOM操作（来自angularjs FAQ）：

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

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

此外，我建议你这些伟大的资源上的主题：

• Angular for the jQuery developer
• How do I “think in AngularJS” if I have a jQuery background?在计算器
• How to convert a jQuery plugin to AngularJS Directive在YouTube上