AngularJs ng-click in expression html

HTMLをAngularJS式で表示しています。AngularJs ng-click in expression html

マイHTMLで

<div ng-bind-html="myText"></div>

そして、私のコントローラで

$scope.myText = $sce.trustAsHtml("<div class='my-style' ng-click='onClick(10)'>click me</div>"); 

$scope.onClick = function(value) 
{ 
    console.log("onClick: value:"+value); 
}

しかし、私はクリックイベントにの一つで

UPDATE

を取得することはできませんよquestion私はそれが記述されて参照してくださいHTMLタグをテキストに追加する方法、またはHTMLをコンパイルする方法について説明します。しかし、私の質問は、準拠したHTMLからng-clickイベントを取得する方法に関連しています。私はこの解決策を提供している答えは見当たりません。

出典

2016-11-11 User7723337

可能な複製（http://stackoverflow.com/questions/19726179/how-to-make-ng-bind [NG-バインドHTML angularjsコードをコンパイルの作り方] -html-compile-angularjs-code） – harishr

あなたのために見つけてください。あなたはそれを指示する必要があります。 http://stackoverflow.com/questions/20297638/call-function-inside-sce-trustashtml-string-in-angular-js/20298466#20298466 –

申し訳ありませんが、再びコードを書くために：

 <div id="test"></div>

が続いて以下のいずれかにそのコードを変更します：これは動作するようにあなたのコードを管理します

var myText = "<div class='my-style' ng-click='onClick(10)'>click me</div>"; 

    var element = angular.element(document.querySelector('#test')); 
    var generated = element.html(myText); 
    $compile(generated.contents())($scope);

まず、あなたのdivに固有のIDを与えます。乾杯！

出典

2016-11-11 07:01:32

@SURAJEET SINGH Bisht：HTML表示に関する問題に直面していません。 HTMLを見ることができますが、ng-clickに関連する問題に直面しています。私は挿入されたHTMLコードでクリックイベントを取得できません。 – User7723337

ありがとう、これは私が探していたものです。それは角度アプリの任意の副作用に他の意味を持っていますか？ – User7723337

それについて心配しないでください。それは現在のイベントをレンダリングするだけです –

I have append the html using id or class     
var add = angular.element(document.querySelector('#updatechoose')); 
       add.append('<div class="form-group" ng-repeat="updatedata in getdata">'+ 
           '<div>'+ 
           '<input type="file" id="imgupload" ng-model="attachment" imgepath="{{updatedata.imagepath}}" imgname="{{updatedata.imagename}}" name="file[]" style="padding-left: 15px;" class="imgupload col-md-4 cropit-image-input" />'+ 
           '<i class="glyphicon glyphicon-trash" **ng-click="remove()"**></i>'+ 
           '</div>'+ 
          '</div>');

出典

2016-11-11 07:03:36

私はこの方法でテストしましたが、私のコントローラーでクリックイベントを取得できませんでした。実例を投稿できますか？ – User7723337

上記の例は私のプロジェクトでうまくいきます.HTMLコード

–

この機能を実装するには、ディレクティブを使用します。デモここhttp://plnkr.co/edit/tTgVCMt7JqvaQOrjhLLL?p=preview

JSを確認してください：

var app = angular.module('plunker', []); 

app.controller('MainCtrl', function($scope) { 

    $scope.testClick = function(value) { 
     alert("onClick: value:"+value); 
    }; 
}); 

app.directive("clickDynamic", function(){ 
    return { 
     template:"<div class='my-style' ng-click='testClick(10)'>click me</div>" 
    }; 
});

HTML：

<body ng-controller="MainCtrl"> 
    <div click-dynamic></div> 
</body>

出典

2016-11-11 07:46:23

ありがとうございます。私が生成しているHTMLテキストは動的で、ランタイムに生成されます（クラウドAPI呼び出しの応答に依存します）。私はコントローラからこのHTMLテキストを構築する必要があります。また、この動的テキストを持つ複数のdivがあります。 – User7723337

一つの解決策は、プレーンジャバスクリプトを使用して範囲を取得することです。このようにして、内部メソッドを呼び出すことができます。

<div ng-bind-html="myText"></div> 
$scope.myText = $sce.trustAsHtml('<div class="button" onClick="var scope = angular.element(this).scope();scope.testClick(10);">click me</div>');

はその後、私は、私は内部のメソッドを呼び出すことができ、このようにスコープを取得し、私はNG-クリックするのではなく、のonClickを使用していますのでご注意ください。
汚い解決策ですが、おそらくそれはあなたを助けることができます。

出典

2016-11-11 07:57:47 Hosar

スニペットを追加しました。スニペットには、ディレクティブと$ compileサービスによる実装が示されています。

angular.module('TestApp', []) 
 
    .directive('compileDir', function($compile) { 
 
    return { 
 
     restrict: 'E', 
 
     scope: { 
 
     dynTpl: '=' 
 
     }, 
 
     template: 'Num clicked: {{numClicked}}', 
 
     link: function(scope, elem) { 
 
     scope.numClicked = 0; 
 
     scope.click = function() { 
 
      scope.numClicked++; 
 
     }; 
 

 
     var tpl = $compile(scope.dynTpl)(scope); 
 
     elem.append(tpl); 
 
     } 
 
    }; 
 
    });

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

 

 
<div ng-app="TestApp"> 
 
    <compile-dir dyn-tpl="'<button ng-click=\'click()\'>Click</button>'"></compile-dir> 
 
</div>

出典

2016-11-11 08:39:15 dinony

AngularJs ng-click in expression html

答えて

関連する問題