Editable text using angular JS acts like a regular link

Question

Can you help what I'm doing wrong here?

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

https://vitalets.imtqy.com/angular-xeditable/

Here is my html code corresponding to html

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

I insert the angular js controller and that’s it, I have no error, it just 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 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 setting max and saving the value at the same time

Answer 1

Your problem here is: <form id="msform" ng-controller="GenerationContenuController as ctrl" editable-form> In other words, you used the controller as syntax. Uninstall it or use the latest version of Angular with it. Hope this helps you.

Here is a script that works without controller as syntax.

Fiddle

Here is a script with the latest version of Angular and controller as syntax:

Fiddle

UPDATE:

If you need to use it in a form, you need to do it differently.

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

Fiddle Work