Question

我正在使用Angular UI Routing和一个UI插件在Angular中开发一个应用程序，该插件具有＆＃34; checkbox开关＆＃34;基于自举开关。

问题是模板是在破坏交换机的shell页面之后加载的，它们显示为普通复选框。请注意，复选框包含在父div中，类为＃34; switch＆＃34;显得正确。

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

到目前为止，这是一款带有应用程序的Plunker： http://embed.plnkr.co/LRSGXqxjtbYcr6rjTj69/preview

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

HTML：

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

JS：

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

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

Answer 1

不要使用jquery切换，而是使用angular：

<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

Switch不支持Angular UI Routing

1 个答案: