角度js指令中的jquery

Question

Hi I have a problem to run function writing in jquery in angular. I got erreor function is not defined. I have a write smiliar fuction and working fine but this function doesn't work. This is function inside html file and work correct link to fiddle 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>

And this is my directive:

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

;

Answer 1

How did you implement this directive 'dashboard' in html ?

If you need to use function editFunction on the view, bind it to scope.

scope.editFunction = function(){...}

Give <input> an ng-model="loadInputObj.val" , and use angular directive option to pass object in,
maybe you don't need jQuery, it will help you to prevent some bugs.

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

ref: https://docs.angularjs.org/guide/directive