0 レビュー
2 回答
php-ngクリックがjqueryで機能しないappend/動的タグを指示する方法
まず第一に、ボタンの送信後、特定のdivを追加するなど、動的な方法でディレクティブの使用を取得/理解することはできません。
結果として、Angularで要素を追加する際にjqueryを使用しました。私の問題は、ng-clickが追加された要素にバインドされていないことです
以下は、私の要素のコントローラーと描画関数のコードです
表示
<div class="box" ng-controller="addWorkOrder">
<div class="box-header with-border">
New Work Load
</div>
<div class="box-body">
<div class="form-group">
<input class="form-control" id="add_wl" ng-model="addwo_title" placeholder="Add Work Load">
</div>
<div class="form-group" id="add_wl_div" style="display:none">
<button type="" class="btn bg-olive pull-right" ng-click="click_addwo()">Add</button>
</div>
</div><!-- /.box-body -->
</div><!-- /.box -->
角度コントローラー
app.controller('addWorkOrder',['$scope','$rootScope','$http','$compile',function($scope,$rootScope,$http,$compile){
$scope.$watch('project_id',function(){
$scope.click_addwo = function(){
$http.post(base_url+'ajax/add_workorder',{proj_id:$rootScope.project_id,wo_title:$scope.addwo_title})
.then(function(response){
if(response.data.success == 0){
alert(response.data.msg);
}else{
draw_workorder({
wo_id : response.data.data,
wo_title : $scope.addwo_title
});
$scope.addwo_title = "";
}
});
}
});
}]);
最後に、送信ボタンの成功時に呼び出される関数draw_workorder（）
function draw_workorder(data){
// workorder card view
l = '<tr data-id="'+ data.wo_id +'" style="display:none;">'+
'<td style="width:30px"></td>'+
'<td class="mailbox-name"><a href="read-mail.html" ng-click="wmodal('+ data.wo_id +')" data-toggle="modal" data-target="#myModal">'+ data.wo_title +'</a></td>'+
'<td class="mailbox-subject"><span class="badge bg-red">pending</span></td>'+
'<td class="mailbox-attachment"></td>'+
'<td class="mailbox-date" data-livestamp="'+ new Date().toLocaleString() +'"></td>'+
'</tr>';
$(l).prependTo('#wo_container').fadeIn();
}
http service ins controllerが高く評価された後、ディレクティブを使用して要素を適切に追加/追加する方法を誰でも教えてくれます
もう一度、Angularの初心者であることをお詫びします。私はAngularDirectiveのドキュメントを読むために最善を尽くしましたが、他の例は私にとって非常に複雑なようです。
わからない
0
レビュー
答え :
解決策：
必要なことは、要素に実際にディレクティブがあることをAngularに通知することです。これは、$ compileサービスを使用して実現できます。ここでは、例の jsfiddle
を簡略化しました。 app.controller('addWorkOrder', ['$scope', '$rootScope', '$http', '$compile',
function($scope, $rootScope, $http, $compile) {
$scope.click_addwo = function() {
l = '<button type="" ng-click="attachedFunct()">Click Me!</button>';
$('#wo_container').append($compile(l)($scope));
};
// Function that will be used by dynamically added element.
$scope.attachedFunct = function() {
alert('Clicked attached function');
};
}
]);
わからない
0
レビュー
答え :
解決策：
要素に追加する前にhtmlをコンパイルする必要があるため、ng-clickが機能しません。
var $compile = ...; // injected into your code
var scope = ...;
var parent = ...; // DOM element where the compiled template can be appended
var html = '<div ng-bind="exp"></div>';
// Step 1: parse HTML into DOM element
var template = angular.element(html);
// Step 2: compile the template
var linkFn = $compile(template);
// Step 3: link the compiled template with the scope.
var element = linkFn(scope);
// Step 4: Append to DOM (optional)
parent.appendChild(element);
詳細については、このリンク
にアクセスしてください。
わからない
同様の質問
私たちのウェブサイトで同様の質問で答えを見つけてください。