自定义指令按钮单击的控制器方法？角度js

Posted 2023-05-09

【中文标题】自定义指令按钮单击的控制器方法？角度js

【英文标题】：Controller method on button click of custom directive ? angular js

【发布时间】：2018-03-31 02:46:25

【问题描述】：

我有我的自定义指令在父 html 中上传这样的文件

<uploading-multiple-files controlmodel="serviceProfile.serviceProfileAttachments"
   upload-all-action="uploadAll"  delete-action="deleteImage"
   attachment-type-id="scopeTypeId" url="scopeUrl" enable-upload="enableUpload">
</uploading-multiple-files>

在父控制器中deleteAction的代码是

  $scope.deleteImage = function (attachment) 

        alert(attachment.id);
   

我的uploadAllAction 正在工作我想以类似的方式实现deleteAction 这是它的实现

function uploadingMultipleFiles(FileUploader, $rootScope, $http, $filter, $window, browser) 
    return 
        replace: false,
        scope: 
            'attachmentTypeId': '=?',
            'controlmodel': '=',
            'url': '=',
            'maxsize': '=?',
            'uploadAllAction': '=?',
            'deleteAction': '=?',
            "counter": '=?',
            "enableUpload": '=?',
            "isRequired": '=?'
        ,
        templateUrl: '/app/views/Controls/UploadingMultipleFilesDirective/UploadingMultipleFilesDirectiveTemplate.html',
        link: link
    ;

现在我要初始化我的方法

  <div class="col-md-6" ng-repeat="item in controlmodelFiltered">
        <div class="col-md-12">
            <button class="info" ng-click="delete(item)">x</button>        
        </div>  
  </div>

所以ng-click="delete(item)" in 指令用来初始化deleteAction

    scope.delete = function (attachment) 
        debugger;
        scope.deleteAction(attachment);    //error delete action is not defined           
    

当我单击删除按钮时，指令 js 用附件初始化 deleteAction，它应该调用控制器方法，然后在指令中定义 但我得到了错误

TypeError: scope.deleteAction 不是函数

【问题讨论】：

发布deleteAction方法

一般来说，避免在组件中进行双向'=' 绑定。而是使用单向 '<' 绑定输入和使用表达式 '&' 绑定输出。它将更容易过渡到 Angular 2+。有关详细信息，请参阅AngularJS Developer Guide - Component-based Application Architechture。

【参考方案1】：

你应该把deleteAction作为一个动作绑定`deleteAction: '&'来传递，然后你可以做类似的事情

<button class="info" ng-click="deleteAction(item)">x</button> 

如前所述，我建议在创建组件时避免使用双向绑定。