AngularJs: xeditable injection and different controller usage

Question

I need something similar to this example

http://jsfiddle.net/NfPcH/93/

I use it loke this (function() { 'use strict';

angular .module('myapp') .controller('MyCtrl', ProjectVariablesController);

MyCtrl.$inject = ['$scope', '$state', '$filter', '$http', 'entity'];


function MyCtrl($scope, $state, $filter, $http, entity) {
    var vm = this;
    vm.project = entity;

     $scope.users = [
        {id: 1, name: 'awesome user1', status: 2, group: 4, groupName: 'admin'},
        {id: 2, name: 'awesome user2', status: undefined, group: 3, groupName: 'vip'},
        {id: 3, name: 'awesome user3', status: 2, group: null}
      ];

      $scope.statuses = [
        {value: 1, text: 'status1'},
        {value: 2, text: 'status2'},
        {value: 3, text: 'status3'},
        {value: 4, text: 'status4'}
      ];


      $scope.checkName = function(data, id) {
        if (id === 2 && data !== 'awesome') {
          return "Username 2 should be `awesome`";
        }
      };

      $scope.saveUser = function(data, id) {
        //$scope.user not updated yet
        angular.extend(data, {id: id});
        return $http.post('/saveUser', data);
      };

      // remove user
      $scope.removeUser = function(index) {
        $scope.users.splice(index, 1);
      };

      // add user
      $scope.addUser = function() {
        $scope.inserted = {
          id: $scope.users.length+1,
          name: '',
          status: null,
          group: null
        };
        $scope.users.push($scope.inserted);
      };
}

})();

as a result, cells editing doesn't work. after some experiments, I understood that I don't have xeditable dependency as in the example

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

though I have already pre-defined "app" module, how can I add xeditable?

Answer 1

Since you already injecting the module xeditable in your angular app, you need to include xeditable in you HTML page also:

<script src="http://vitalets.github.io/angular-xeditable/dist/js/xeditable.js"></script>

Answer 2

Just download Xeditable lib from here and include it inside your index.html main file. Then just add it as dependency in your app.js. Then example should work fine.