角度：htmlに動的にコンポーネントを追加してブートストラップするにはどうすればいいですか？

私はこれをしたい：今角度：htmlに動的にコンポーネントを追加してブートストラップするにはどうすればいいですか？

<body ng-app="MyApp"> 
<div id="content"><button onclick="addCode()">Add Code</button></div> 
</body>

、機能 "addCode（）" これをやっている：（jQueryライブラリで）

function addCode(){ 
    $("content").html("<hello-world></hello-world>"); 
}

あなたはこのようなコードを持っています

このタグは角度成分です。コード：

'use strict'; 
     angular.module('MyApp', []).component('helloWorld', { 
      templateUrl: 'template.html', 
      controller: function() { 
       this.greet = 'Hello World'; 
      } 
});

最後に、te mplate.htmlは、次のコードを持っています

<p>{{$ctrl.greet}}</p>

どのようにウェブで段落内、代わりに{{$ctrl.greet}}の、「Hello Worldのを」が表示されますので、そのスクリプトは、ボタンをクリックした後、アプリケーションを起動することができますか？

つまり、ドキュメントを動的にロードするためにcomponentsタグを検索して、ドキュメントを再ロード/再ブートストラップする必要があります。

<body><hello-world></hello-world></body>を設定してドキュメントを読み込んだ場合、これは完全に機能します。コンポーネントを設定し、最初に読み込んだ後に読み込みたいと思います。

出典

2016-07-22 Hexania com

は、実行してみてください関数をng-if = "myFunction（）"または値$ scope.myvaに設定しますlue set addCode（） – Fky

ng-ifを使った方がうまくやらないとは思えません。実際には、jQueryで角度成分を任意に注入することは想定されていません。 – CautemocSg

Angular以外でDOMを変更する場合は、Angularに通知する必要があります。これは$scope.$digest()コマンドで実行できます。

出典

2016-07-22 14:29:20 Psaniko

SOLVED！

これはコードです、私はそれを得ました、それほど難しくありませんでした。ウルHTMLメインファイルやレイアウトの

<button class="ng-binding" ng-click="$ctrl.updateHello ('Angular')">UPDATE</button> 
<div>{{$ctrl.greet}}</div>

：ウルHTMLテンプレートで

angular.module('MyApp', []).component('helloWorld', { 
     templateUrl: 'template.html', 
     controller: function ($http) { 
      var ctrl = this; 
      ctrl.updateHello = function (str) {      
       ctrl.greet = 'Hello '+str; 
      }; 
      ctrl.updateHello('World') 
     } 
});

：ウルスクリプトで

<hello-world></hello-world>

出典

2016-07-23 15:05:31

角度：htmlに動的にコンポーネントを追加してブートストラップするにはどうすればいいですか？

答えて

関連する問題