javascriptにangularJS属性のHTMLを挿入するにはどうすればよいですか？

私が試してみたい：javascriptにangularJS属性のHTMLを挿入するにはどうすればよいですか？

function test(){ 
    $('#somediv').html('<div ng-model="name">{{name}}</div>'); 
}

はこれを行う方法はありますか？

出典

2017-04-25 Anonymous

jQueryish DOM操作は、との良好な方法ではありません角度。代わりに 'ng-show/hide'と' ng-if'をこの目的のために使うことができます – tanmay

$compileサービスを利用する必要があります。

だけのようなHTML文字列コンパイル：

var html = $compile('<div ng-model="name">{{name}}</div>')($scope);

があなたのコントローラに$compileサービスを注入することを忘れないでください。

出典

2017-04-25 07:45:44

Hasan Ibrahimに感謝します、私は角度コントローラーで同じアイデアを試みましたが、何かが間違っていました:(http://stackoverflow.com/questions/43603948/angularjs-compile-is-not-a-function –

@NhạHoàngもこれを受け入れます。 –

angleのビルトインディレクティブを含むhtmlを追加する場合は、角度を認識させるために$compileで再コンパイルする必要があります。

は、次のコードスニペットを参照してください。

angular.module("app", []) 
 
    .controller("myCtrl", function($scope, $compile) { 
 
    $scope.name = 'test value'; 
 
    $scope.test = function() { 
 
     var element = angular.element($('#somediv')); 
 
     element.html('<div ng-model="name">{{name}}</div>'); 
 
     $compile(element)($scope); 
 
    }; 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
 

 
<div ng-app="app" ng-controller="myCtrl"> 
 
    <input type="text" ng-model="name"> 
 
    <button ng-click="test()">Add</button> 
 
    <div id="somediv"></div> 
 
</div>

出典

2017-04-25 08:03:54 Pengyy

代わりのような何かを、角度でjQueryのDOM操作を使用しないでください：

angular.module("main", []).controller("mainController", function($scope){ 
 

 
    $scope.toggle = function(){ 
 
    
 
    $scope.show = !$scope.show; 
 
    
 
    } 
 

 
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"></script> 
 
<html ng-app="main"> 
 
<head> </head> 
 

 

 
<body ng-controller="mainController"> 
 
<div> 
 
<button ng-click="toggle()"> Toggle Div </button> 
 

 

 
<div ng-if="show"> Div Contents </div> 
 
</div> 
 
</body> 
 
</html>

出典

2017-04-25 10:42:45 user3597009

javascriptにangularJS属性のHTMLを挿入するにはどうすればよいですか？

答えて

関連する問題