AngularJS - ng-click不能在自定义指令中工作
问题描述:
我已经创建了自定义指令。模板中定义的控件似乎工作正常。但是,我需要附加另一个控制 - 图像按钮,根据一些条件模板中定义的控件。为此,我包含了一个IF条件,创建了一个图像按钮并为其添加了“ng-click”属性。然而,使用javascript'追加'图像按钮到我的模板控件('html')似乎没有工作,因为它说没有'追加'是一个未定义的函数。因此,我用'concat()',这呈现图像按钮,但'ng-click'不起作用。控制器中的功能确实受到打击。请帮忙!AngularJS - ng-click不能在自定义指令中工作
<div ng-controller="pdfFormsEditController">
<split-pane id="splitPane" height="800">
\t \t \t <split-pane-component id="leftPane" width="50%"> <div class="form-editor boxed-section dashed" id="form">
<form-control ng-repeat="control in formDefinition.Definition.controls" control="control" />
</div></split-pane-component>
\t \t </split-pane>
</div>
这是我的指导文件 -
"use strict";
angular.module('configurePDF.directives.noteForms', [])
.directive('formControl', ['$compile', function ($compile) {
var templates = {
"NoteLabel":'<label ng-click="onSelectNoteField(control.Name)" ng-style="control.style" style="font-style:Bold; font-size: 8.25pt; font-family:Arial">{{control.Properties.DisplayName}}</label>',
"NoteMedcinFinding":'<p ng-click="onSelectNoteField(control.Name)" ng-style="control.style"><input type="image" src="../Images/YesNo.gif" style="Width:35px; Height:17px;"><label style="font-style:Bold; font-size: 8.25pt; font-family:Arial">{{control.Properties.OriginalText}}</label></input></p>'
}
var linker = function(scope, element, attrs) {
var location = scope.control.Properties.Location.split(',');
var size=scope.control.Properties.Size.split(',');
// var font=scope.control.Properties.Font.split(',');
scope.control.style = {position: "absolute", left: (parseInt(location[0])*1.5) + "px", top: location[1] + "px" ,minWidth:425+"px",height:size[1]+"px"};
var html = templates[scope.control.Type];
debugger;
if(scope.control.Properties.DetailFormID != "00000000-0000-0000-0000-000000000000"){
var img = document.createElement('input');
img.type = "image"
img.src = "../../Images/plus.png";
img.height = 10;
img.width = 10;
img.style.position = 'absolute'
img.style.left = ((parseInt(location[0])*1.5) - 13) + "px"
img.style.top = (parseInt(location[1]) + 3)+ "px"
//img.className ="ng-scope ng-binding"
//img.onclick = "onSelectNoteField(scope.control.Properties.DetailFormID)"
var attr = document.createAttribute("data-ng-click");
attr.value = "onSelectNoteField(control.Properties.DetailFormID)";
img.attributes.setNamedItem(attr);
debugger;
html = html.concat(img.outerHTML);
//console.log(element);
}
var elem = $compile(html)(scope);
element.replaceWith(elem);
}
return {
restrict: "E",
replace: true,
link: linker,
scope: {
control:'='
}
};
}]);
更新:我读到类= “NG-范围NG结合” shoul d会在元素的html中自动创建。但是在我的图像按钮中,类只是“ng范围”。所以,可能是有一些绑定问题的范围,因为我没有能够追加图像按钮,但连接它?
<input type="image" src="../../Images/plus.png" height="10" width="10" style="position: absolute; left: 32px; top: 83px;" data-ng-click="onSelectNoteField(control.Properties.DetailFormID)" class="ng-scope">
控制器:
/
.controller('pdfFormsEditController', ['$scope', '$routeParams', 'pdfFormsService','mastersService','$rootScope',
function pdfFormsEditController($scope, $routeParams, pdfFormsService,mastersService,$rootScope) {
var allNoteFields = [];
$scope.editMode = true;
$scope.onSelectNoteField = function(noteField) {
debugger;
$scope.formDefinition = {};
var result = pdfFormsService.getFormDefinition('3151ff0d-6c93-4c80-9182-fd05f7d6cf90');
result.success(function (formDefinition) {
console.log(formDefinition);
$scope.formDefinition = formDefinition;
var size = $scope.formDefinition.Definition.Properties.Size.split(',');
$scope.formDefinition.style = { position: 'relative', width: size[0] + "px", height: size[1] + "px" }
}
答
好了,我找到了答案,它很简单!当我致电onSelectNoteField!我的指令没有访问/链接到示波器!因此,不同的方法起作用。
if ((scope.control.Properties.DetailFormID != "00000000-0000-0000-0000-000000000000") && (scope.control.Properties.DetailFormID != "0") && (scope.control.Properties.DetailFormID !== undefined)) {
var img = document.createElement('input');
img.type = "image";
img.src = "../../Images/plus.png";
img.height = 10;
img.width = 10;
img.style.position = 'absolute'
img.style.left = ((parseInt(location[0]) * 1.5) - 13) + "px"
img.style.top = (parseInt(location[1]) + 3) + "px"
//img.className ="ng-scope ng-binding"
//img.onclick = "onSelectNoteField(scope.control.Properties.DetailFormID)"
var attr = document.createAttribute("data-ng-click");
attr.value = "onImageClick('" + scope.control.Properties.DetailFormID + "')";
img.attributes.setNamedItem(attr);
html = html.concat(img.outerHTML);
}
var elem1 = $compile(html)(scope);
element.replaceWith(elem1);
scope.onImageClick = function (subformID) {
var id = subformID;
scope.onImageClick = function (control) {
var scope = angular.element($("#form")).scope();
scope.onSelectNoteField(id);
}
}
我创建一个作用域属性 - 功能onImageClick和我的形象的NG-点击调用此。 onImageClick获取我的父元素的作用域,它可以访问我想调用的函数 - onSelectNoteField!
您是否尝试先替换元素,稍后再编译? – 2014-10-01 11:47:25
你的意思是? “element.replaceWith(HTML); element = $ compile(element)(scope); ”。这不会创建'class'属性。 – 2014-10-01 11:56:00
忘记我以前的评论 - 我只以一种不同的方式使用了$ compile()。 – 2014-10-01 12:56:26