Question

你能帮助我在这里做错吗？

我使用xeditable和angular在我的一个表单中实现了一个带角度js的可编辑标签，但奇怪的是可编辑标签就像一个普通的链接，我按照这个文档

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

这是我的相关HTML代码

＆＃13;

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

＆＃13;

我正在插入角度js控制器和所有内容，我没有得到任何错误，只是它像普通链接一样。

编辑我的app.js看起来像

＆＃13;

'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';
........

    }]);

＆＃13;

我的控制员：

＆＃13;

'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'
    	   };



...



}]);

＆＃13;

最后是html

＆＃13;

<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>

＆＃13;

我试图把最大值保持在同一时间

Answer 1

您的问题出在此处：<form id="msform" ng-controller="GenerationContenuController as ctrl" editable-form>。换句话说，您使用了controller as语法。删除它或使用最新的Angular版本。希望这对您有所帮助。

这是没有controller as语法的小提琴。

Fiddle

以下是最新的Angular版本和controller as语法的小提琴：

Fiddle

更新：

如果您需要在表单中使用它，那么您必须采用不同的方式。

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

工作Fiddle

带有角度JS的可编辑文本就像普通链接一样

1 个答案: