onshow error

by ckosloski

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular-sanitize.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://vitalets.github.io/angular-xeditable/dist/js/xeditable.js"></script>
<link rel="stylesheet" href="http://vitalets.github.io/angular-xeditable/dist/css/xeditable.css">
<html ng-app="app">
  <h4>Angular-xeditable Editable form (Bootstrap 3)</h4>
  <div>
    <div ng-controller="EditableFormCtrl" id="EditableFormCtrl">
     <form editable-form name="editableForm"  onaftersave="saveUser()" onshow="onshow_callback($event)" blur="ignore">
        <div>
          <!-- editable username (text with validation) -->
          <span class="title">User name: </span>
          <span editable-text="user.name" e-name="name" e-required>{{ user.name || 'empty' }}</span>
        </div> 

        <div class="dropdown">
          <button class="btn btn-default" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu" id="menu1" aria-labelledby="dropdownMenu1">
            <li><a href="#">Action</a></li>
          </ul>
        </div>

        <div>
          <!-- button to show form -->
          <button type="button" class="btn btn-default" ng-click="editableForm.$show()" ng-show="!editableForm.$visible">
            Edit
          </button>
          <!-- buttons to submit / cancel form -->
          <span ng-show="editableForm.$visible">
            <button type="submit" class="btn btn-primary" ng-disabled="editableForm.$waiting">
             ...

CSS

/**div[ng-app] { margin: 10px; }
form[name="editableForm"] > div {
  height: auto;
  padding: 5px 0;
}

form[name="editableForm"] .title {
  display: inline-block;
  font-weight: bold;
  padding-top: 5px;
  vertical-align: top;
  min-width: 90px;
}

form[name="editableForm"] .editable {
  display: inline-block;
  padding-top: 5px;
  vertical-align: top;
}

form[name="editableForm"] select {
  width: 120px;
}**/

JavaScript

var app = angular.module("app", ["xeditable"]);

app.run(['$rootScope', '$httpBackend', 'editableOptions', 'editableThemes', function($rootScope, $httpBackend, editableOptions, editableThemes) {
  $rootScope.debug = {};

  editableOptions.theme = 'bs3';
  editableOptions.activate = 'focus';
}]);

app.controller('EditableFormCtrl', function($scope, $filter, $http) {
 $scope.user = {
    id: 1,
    name: 'awesome user',
  }; 

  $scope.onshow_callback = function(e) {
  	console.log("onshow_callback...");
  }
    $scope.saveUser = function() {
  	console.log("saveUser...");
  }
});