Question

这是我的第一篇文章，请耐心等待！我设法（希望）尽可能简单地附上一个有效的代码片段。

正如我在主题中所说，如果通过角度添加到页面，我可以渲染数据切换引导复选框。运行该代码片段，您可以看到一个静态复选框（自举渲染）和一个用于添加更多复选框的按钮（未呈现）

任何肝脏赞赏顺便说一下，我对角度也很陌生

var bootstrapTest = angular.module('boostrapTest', []);

bootstrapTest.service('loadDataService', function() {
    return {
             LoadToggle: function() {
                return '<label class="checkbox-inline"> <input type="checkbox" checked data-toggle="toggle"></label>'
             }
    }
});
/**
 * Controllers
 */

bootstrapTest.controller('bootstrapTestController', function($scope, $compile, loadDataService) {

    $scope.doLoadToggle = function (){
        var myToggle = loadDataService.LoadToggle ();
        var outputMainScope = angular.element(document.getElementById('output_main'));
        // var temp = $compile(myToggle)($scope);
        outputMainScope.append(myToggle)
    }
});

<html>
<head>
    <title>dynamyc apply bootstrap testing</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
    <script src="testBootstrap.js"></script>
    <!-- (load bootstrap) CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
    <!-- (load bootstrap) js -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
    <!-- (end load bootstrap) -->
</head>
<body ng-app="boostrapTest">
<div id="body" ng-controller="bootstrapTestController">
  <div id="header">
        <label class="checkbox-inline">
            <input type="checkbox" checked data-toggle="toggle"> static
        </label>
        <input type="button" ng-click="doLoadToggle()" value="CaricaToggle" >
  </div>
  <div id="output_main">
        <p >pippo</p>
    </div>
  </div>

 </body>
</html>

Answer 1

我会稍微偏离我的回答来澄清一些基本方面。

操纵DOM的Angular概念是指令。您可以从阅读有关Angular指令的教程开始，通过简单的Google搜索可以获得很多。以this one为例。你不应该从指令之外修改DOM，因为这不是一个好的做法，并且可能导致不良影响（谷歌充满了为什么这样的例子）。

回到你的具体情况：你甚至不需要使用指令。您可以简单地使用控制器和视图。一旦了解了需要完成的工作，就可以按如下方式重构代码：

控制器应该保留当前复选框的数组。我们简单地称之为$scope.checkboxes。每个元素都可以是一个JavaScript对象，其中包含2个属性`{title：string，checked：boolean};
您的视图应使用ng-repeat指令根据$scope.checkboxes中的数据插入复选框列表。 ng-repeat作为一个指令，将确保它操纵DOM并注入正确的HTML元素，而不必明确地这样做。）
您的控制器公开了一个向$scope.checkboxes添加新复选框的功能。单击 Carica Toggle 按钮时将调用此方法。将新元素添加到复选框数组后，Angular的数据绑定和ng-repeat指令将确保您的视图得到正确更新。

以下是您的控制器未经测试的代码段：

bootstrapTest.controller('bootstrapTestController', function($scope, ...) {
  $scope.checkboxes = [];

  $scope.doLoadToggle = function() {
    $scope.checkboxes.push({
      title: "Checkbox " + $scope.checkboxes.length,
      checked: false
    })
  }
}

以及相关视图

<body ng-app="boostrapTest">
  <div id="body" ng-controller="bootstrapTestController">
    <div ng-repeat="cb in checkboxes">
      <label class="checkbox-inline">
        <input type="checkbox" ng-model="cb.checked"> {{ cb.title }}
      </label>
    </div>
    <input type="button" ng-click="doLoadToggle()" value="Carica Toggle" >
  </div>

希望有所帮助，可以通过添加管理复选框及其状态的服务进一步重构，并在项目复杂性要求的情况下为复选框列表引入自定义指令。

Angularjs：如果动态附加到页面，则无法获得引导数据切换功能

1 个答案: