AngularJS - ng-click不能在自定義指令中工作

Question

我已經創建了自定義指令。模板中定義的控件似乎工作正常。但是，我需要附加另一個控制 - 圖像按鈕，根據一些條件模板中定義的控件。爲此，我包含了一個IF條件，創建了一個圖像按鈕併爲其添加了「ng-click」屬性。然而，使用javascript'追加'圖像按鈕到我的模板控件（'html'）似乎沒有工作，因爲它說沒有'追加'是一個未定義的函數。因此，我用'concat（）'，這呈現圖像按鈕，但'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" } 
 

 
       
 
      } 

Answer 1

好了，我找到了答案，它很簡單！當我致電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！