Question

我创建了一个自定义指令。模板中定义的控件似乎工作正常。但是，我需要追加另一个控件 - 图像按钮，根据某些条件在模板中定义的控件。为此，我添加了IF条件，创建了一个图像按钮，并添加了一个“点击”按钮。归因于它。但是，使用javascript＆＃39; 追加＆＃39;图像按钮到我的模板控件（＆＃39; html＆＃39;）似乎不起作用，因为它说没有＆＃39;追加＆＃39;是一个未定义的函数。因此，我使用＆＃39; concat （）＆＃39;，这会呈现图片按钮，但是点击了＆＃39;不起作用。控制器中的功能确实受到了影响。请帮忙！

＆＃13;

 <div ng-controller="pdfFormsEditController">
                <split-pane id="splitPane" height="800">
			<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>                                  
		</split-pane>
            </div>

＆＃13;

这是我的指令文件 -

＆＃13;

"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:'='
        }
    };

}]);

＆＃13;

更新：我读到 class =＆＃34; ng-scope ng-binding＆＃34; 应该在元素的html中自动创建。但是在我的图像按钮中，类只是＆＃34; ng-scope＆＃34;。所以，可能是范围有一些绑定问题，因为我无法追加图像按钮但连接它？

＆＃13;

   <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">

＆＃13;

控制器：

＆＃13;

/
      .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" }

                
            }

＆＃13;

Answer 1

好吧，我找到答案了，非常简单！当我在调用 onSelectNoteField 时，我的指令没有访问/指向范围的链接！因此，有一种不同的方法。

＆＃13;

    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);
            }
        }

＆＃13;

我正在创建一个范围属性 - 函数 onImageClick 并在我的图像的ng-click中调用它。 onImageClick 获取我的父元素的范围，该元素可以访问我想要调用的函数 - onSelectNoteField ！

AngularJS - ng-click在自定义指令中不起作用

1 个答案: