Q&A
angular.jsのバージョンはいくつですか？
お世話になっております。
下記のソースがあります
$('div').append('<img src="ooo" ng-click="func1()" onclick="func2">');
画面読み込み終了後、イメージをクリックした場合
func1()---実行されない func2()---実行される
となります。
●func1()
すでに他の箇所で"ng-click"から呼ばれている関数
【方法1】
ng-clickでfunc1()を実行する
【方法2】
onclickでangularに定義されたfunc1()を実行する
【方法3】
func2()の中でangularに定義されたfunc1()を実行する
これらの方法で可能なのはありますでしょうか？
よろしくお願いします
バージョン1.5.8です
func1()とfunc2()はどちらもコントローラーのスコープに追加されたものですか？（コントローラー側のスクリプトで $scope.func1(); のように参照できますか？）可能なら、func1()とfunc2()のコードを追記してください。
append()ではなく直にHTMLに書いた場合はどうなるのでしょうか。
func1()はスコープ内,func2()はスコープ外に書きました
直に書くとは('div').html()のようにということでしょうか？
いえ、JavaScriptで動的に設置するのではなく、HTMLとして直書きという意味です。
動的に設定する必要がある箇所でして、HTML直書きは出来ません。テストで直書きした際には動作しました
回答1件
0
ベストアンサー
いろいろと不明なことが多いのでピンポイントの回答になってませんが、以下のことが考えられます。
- func1() を宣言しているコントローラースコープの外側で $('div').append() が実行されている。
これは func1() が controller1 で宣言されているが、$('div')で参照されるHTML要素が controller1 の外側にある、というようなケースです。新しいHTML要素の挿入先を再確認しましょう。
- $('div').append() がAngularJSによってトラッキングされていない。
$('div').append() の処理が、どのような流れで実行されたのか再確認しましょう。AngularJSの世界では、HTML要素の動的な変更はすべてAngularJSによってトラッキングされている必要があります。簡単な例として、setTimeout() によるタイムアウト時に$('div').append()が実行されてしまうと、AngularJSはこのコードが実行されたことを知ることができません。このため ng-click の設定が認識されません。
（追記）標準ディレクティブを使って動的エレメントを生成する例
HTML
1<!DOCTYPE html> 2<html> 3<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> 4 5<body ng-app="myApp" ng-controller="myCtrl"> 6<button ng-click="buttonClick()">click</button> 7 8<div ng-if="clicked"> 9 <p ng-repeat="data in dataList" ng-click="dataClick1()" onclick="dataClick2()">{{data}}</p> 10</div> 11 12<script> 13var app = angular.module("myApp", []); 14app.controller("myCtrl", function($scope) { 15 $scope.dataList = [ 16 "aaa", 17 "bbb", 18 "ccc", 19 "ddd", 20 ]; 21 $scope.clicked = false; 22 $scope.buttonClick = function() { 23 $scope.clicked = true; 24 }; 25 $scope.dataClick1 = function() { 26 console.log("dataClick1"); 27 } 28}); 29 30function dataClick2() { 31 console.log("dataClick2"); 32} 33 34</script> 35 36</body> 37</html> 38
動的なエレメント作成は、上記のようにangularjsの標準ディレクティブを使って行われるべきです。
また、上記のように ng-click と onclick を同時に使うことはできますが、onclick の必要性を再検討して、できる限り ng-click だけで目的の処理ができるように、設計を見直すことをお勧めします。
投稿2018/07/02 05:39
編集2018/07/05 05:59総合スコア2425
tkanda様
返信有難うございます
$('div').append
ですが、配列のforEasch文の中で実行されています。
これだとAngularJSには認識されないのでしょうか？
また、そうだとすればどのようにすればよいのでしょうか？
恐れ入りますが、よろしくお願いします
これらはどういう流れの中の処理ですか？ボタンクリック時？ページロードした時？ajaxの呼び出し完了時？
ボタンクリック時です。
下記のような動作になります。下記でfunc1()が動作するようにしたいです。
$scope.buttonOn = function (id) {
dataList.forEach(function(){
$('div').append('<img ng-click="func1()" src="ooo">');
}
}
返信遅れて失礼しました。安直ですが一番簡単な方法は、以下のように修正することです。
$scope.buttonOn = function (id) {
dataList.forEach(function() {
$('div').append('<img onclick="angular.element(this).scope().func1()" src="ooo">');
});
}
できれば、動的なエレメント作成が $scope にバインドされたオブジェクトの変更によって angularjs のコンパイルシステムを使って行われるようにすることです（例えば ng-if、ng-repeat などを使う方法を検討してください）
返信有難うございます
foreachの代わりにng-repeatを使用するという意味でしょうか？？
ng-repeatの中でappendすればよいでしょか？
angularjsの標準ディレクティブを使う例を回答に追記しますので、ご参照ください。
ありがとうございます。
大変参考になりました。
今後とも宜しくお願いします
あなたの回答
tips
プレビュー
