Angular js指令中的jquery答案

【问题标题】：jquery in angular js directiveAngular js指令中的jquery
【发布时间】：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 中是唯一的链接函数，但您没有在那里使用。这个函数用在什么地方？

标签： jquery angularjs jquery-ui

【解决方案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

【讨论】：

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