Angular js指令中的jquery

Posted 2023-05-09

【中文标题】Angular js指令中的jquery

【英文标题】：jquery in angular js directive

【发布时间】：2017-07-15 06:27:44

【问题描述】：

您好，我在 Angular 中运行 jquery 函数编写时遇到问题。我得到错误函数未定义。我有一个写类似的功能并且工作正常，但是这个功能不起作用。这是 html 文件中的函数并且工作正常 链接到小提琴http://jsfiddle.net/ADukg/10472/

<script type="text/javascript">
    // dragabble function
    $(function($) 
        var panelList = $('#draggablePanelList');
        panelList.sortable(
            // Only make the .panel-heading child elements support dragging.
            // Omit this to make then entire <li>...</li> draggable.
            handle: '.panel-heading', 
            update: function() 
                $('.panel', panelList).each(function(index, elem) 
                    var $listItem = $(elem),
                        newIndex = $listItem.index();
                        // Persist the new indices.
                );
            
        );
    );
    // get parent id selected by radio button
    var parentId;
    $(document).ready(function() 
        $('input:radio[name=edit-panel]').change(function() 
            parentId = $(this).parent().parent().attr("id");
        );

    );
    // edit selected element
    function editFunction() 
        console.log(parentId);
        if (!$("input[name='edit-panel']:checked").val()) 
           return false;
         else 
            var newInputSize = document.getElementById("newSizeEditor");
            var newSize = newInputSize.options[newInputSize.selectedIndex].value;
            $("#"+parentId).removeClass().addClass(newSize);
        
    
    </script>

这是我的指令：

module.directive('dashboard', function() 
    return 
        restrict: 'A',
        link: function (scope, element, attrs) 
            $(function() 
                var panelList = $('#draggablePanelList');
                panelList.sortable(
                    handle: '.panel-heading',
                    update: function() 
                        $('.panel', panelList).each(function(index, elem) 
                            var $listItem = $(elem),
                                newIndex = $listItem.index();
                        );
                    
                );
            );

            scope.editFunction = function() 
                // console.log(parentId);
                if (!$("input[name='edit-panel']:checked").val()) 
                   return false;
                 else 
                    var newInputSize = document.getElementById("newSizeEditor");
                    var newSize = newInputSize.options[newInputSize.selectedIndex].value;
                    $("#"+parentId).removeClass().addClass(newSize);
                

            var parentId;

            angular.element(document).ready(function () 
                $('input:radio[name=edit-panel]').change(function() 
                    parentId = $(this).parent().parent().attr("id");
                );
            );
             
        
    
)

;

【问题讨论】：

请分享错误信息

错误：未捕获的 ReferenceError：editFunction 未定义在 HTMLButtonElement.onclick (:8090/#/home:1) onclick @ :8090/#/home:1 VM10350 home:1 未捕获的 ReferenceError：editFunction 是未在 HTMLButtonElement.onclick (VM10350 home:1) 中定义

edit 函数在您的第一个代码中具有全局范围，但在 angular 中是唯一的链接函数，但您没有在那里使用。这个函数用在什么地方？

【参考方案1】：

你是如何在 html 中实现这个指令“仪表板”的？

如果您需要在视图上使用函数editFunction，请将其绑定到范围。

scope.editFunction = function()...

给<input>一个ng-model="loadInputObj.val"，并使用角度指令选项来传递对象，也许你不需要jQuery，它会帮助你防止一些错误。

scope: 
            loadInputObj: '='
        ,
link: function (scope, ...) 
      // use scope.loadInputObj.val here

参考：https://docs.angularjs.org/guide/directive

【讨论】：

我以这种方式初始化我的指令：