Angularjs：ページに動的に追加された場合、ブートストラップのデータトグルが機能しない

これは私の最初の投稿です。できるだけシンプルな作業用のコードスニペットを付けたいと考えました。Angularjs：ページに動的に追加された場合、ブートストラップのデータトグルが機能しない

私がこの件で述べたように、データトグルブートストラップチェックボックスは、角度を使ってページに追加するとレンダリングされます。あなたはより多くのチェックボックスを追加するための静的なチェックボックス（ブートストラップは、レンダリングされた）とボタンが表示スニペットをすることができます実行（レンダリングされない）任意のHEPははところで、私はあまりにも角度に

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>

本当に新しいです感謝

出典

2016-12-22 Roberto

これは、Angularをどのように使用するのかとはかなり異なります。生のHTMLをDOMに挿入して、それが動作することは期待できません。また、DOMに簡単に切り替えるために、そのようなことを試みることは全く必要ありません。チェックボックスをオンにしてトグルだけを表示させたい場合は、 'ngIf'または' ngShow'/'ngHide'ベースのアプローチを使用してください。 –

ありがとう、オリバー。私は理解しています、そして、私は新しい角度になっていますが、これは一例に過ぎません。実際のビジネスでは、サーバサイドのPythonクエリの結果として、多くのチェックボックス（データトグルとしてスタイル指定されたブートストラップ）を追加する必要があります。 – Roberto

それは私が言ったことに関して何も変わらない。それでもやはり間違ったアプローチです。 –

いくつかの基本的な側面を明確にするために、私の回答から少しずれています。

DOMを操作するための角度の概念がディレクティブです。 Angularディレクティブについてのチュートリアルを読むことで始めることができます。単純なGoogle検索で十分です。たとえば、this oneとします。ディレクティブの外側からDOMを変更すべきではありません。これは良い習慣ではないので、望ましくない影響をもたらす可能性があります（Googleは理由として例がたくさんあります）。

具体的なケースに戻る：指示句を使用する必要はありません。コントローラーとビューを使用するだけです。あなたは何をすべきかを理解したら、次のように、あなたはあなたのコードをリファクタリングすることができます

コントローラは、現在のチェックボックスの配列を維持する必要があります。単に$scope.checkboxesとしましょう。各要素は2つのプロパティ `{title：string、checked：boolean}を持つJavaScriptオブジェクトです。
あなたのビューでは、$scope.checkboxesのデータに基づいてチェックボックスのリストを挿入するには、ng-repeatディレクティブを使用する必要があります。 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>

希望：ここ

は、コントローラのテストされていないスニペットですチェックボックスとその状態を管理するサービスと、チェックボックスのリストのカスタム指示を導入するプロジェクトの複雑さが必要な場合はxes。

出典

2016-12-22 13:18:46

ここにあなたの時間を費やしてくれてありがとう！あなたの答えは、ng-repeatとng-forを使って、DOMにたくさんのhtmlを追加するよりクリーンな方法であることをはっきりと理解しています。 – Roberto

Roberto、あなたはそれが有用だとうれしく思います。 –

@Roberto、回答をアップアップしたり、「正しい」とマークすることを忘れないでください。 –

Angularjs：ページに動的に追加された場合、ブートストラップのデータトグルが機能しない

答えて

関連する問題