Editable-Text with angular JS acts like a normal link

Question

Can you help what i am doing wrong here?

I implemented an editable label with angular js in one of my forms using xeditable and angular but the strange is that the editable label acts like a normal link, i followed this doc

https://vitalets.github.io/angular-xeditable/

Here is my relevent html code

        <a href="#"  editable-text="user.name">{{ user.name || "empty" }}</a>
    

I am inserting the angular js controller and everything, i get no error it is just that it acts like a normal link.

EDIT my app.js looks like

'use strict';

var App = angular.module('myApp', [
                               'ngResource',
                               'ngRoute',
                               'ngFileUpload',
                               'angularBootstrapNavTree',
                               'ngAnimate',
                               'angularUtils.directives.dirPagination',
                               "checklist-model",
                               'xeditable'


                             ]);



 //comment
App.config(['$routeProvider','paginationTemplateProvider', function($routeProvider,paginationTemplateProvider) {
 ......

}]);

App.run(['$rootScope','$location','$routeParams','$http','Attribut','Categorie','SsCategorieofcategorie','Produit','ConfigCategorie','editableOptions', function($rootScope, $location, $routeParams, $http, Attribut, Categorie,SsCategorieofcategorie,Produit,ConfigCategorie,editableOptions) {
	  editableOptions.theme = 'bs3';
........

    }]);

And my controller :

'var strict';

App.controller('GenerationContenuController',['$scope', '$http','$interval','GenerationContenu','InputText','$timeout',  function($scope, $http,$interval,GenerationContenu,InputText ,$timeout){

	   var self=this;
    
    	   $scope.user = {
    	     name: 'awesome user'
    	   };



...



}]);

and finally the html

<form id="msform"  ng-controller="GenerationContenuController as ctrl"  editable-form>
  <!-- progressbar -->
  <ul id="progressbar">
    <li class="active">Choix du contenu</li>
    <li>Validation du vocabulaire</li>
    <li>Validation du contenu </li>
  </ul>
  <!-- fieldsets -->
  <fieldset>
    <h2 class="fs-title">Choix du contenu</h2>
        <a href="#"  editable-text="user.name">{{ user.name || "empty" }}</a>
    <div class="form-group">
      <select class="form-control" id="inputText" ng-model="typeInputText" ng-change="ctrl.update()" required>
                <option value="MOT CLE">Mots cles</option>
                <option value="PHRASE">Phrases bateau</option>
                <option value="AVIS">Faux avis</option>
                <option value="CONSEIL">Conseils pour parents</option>
           </select>
           </div>
           <div class="form-group">
           <select class="form-control"  ng-model="selectedInputText" required>
                <option ng-repeat="inputText in inputTexts" value="{{inputText.text}}">{{inputText.text}}</option>
           </select>
           </div>
    <input type="button" name="next" class="next action-button" ng-click="ctrl.genererVocabulaire()" value="Next" />
  </fieldset>

    <fieldSet>
    ....
  </fieldSet>
     <fieldSet>
    ....
   </fieldSet>
</form>

  </div>

I tried to put the max and keep specific in the same time

Answer 1

Your problem is here : <form id="msform" ng-controller="GenerationContenuController as ctrl" editable-form>.In other words you have used controller as syntax.Either remove it or use latest Angular version with it.Hope this will help to you.

Here is the Fiddle which it is working without controller as syntax.

Fiddle

Here is the Fiddle with latest Angular version and with controller as syntax:

Fiddle

UPDATE :

If you need to use it within the form then you have to do it differently.

<span editable-text="user.name" e-name="name" onbeforesave="checkName($data)" e-
required>{{ user.name || 'empty' }}</span>

Working Fiddle