首先,我真的无法以动态方式获取/理解指令的使用,例如在按钮提交后然后附加到特定的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服务INS控制器之后使用指令正确附加/预置元素
,非常感谢我再次抱歉成为角度的新手。 我尽力阅读 Angular 指令文档,似乎他们给出的其他示例对我来说非常复杂。
你需要做的是让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');
};
}
]);
您的 ng-click 不起作用,因为您需要在将 html 附加到某个元素之前对其进行编译。
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);
欲了解更多信息,请访问此链接