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

Posted 2023-05-08

【中文标题】带有角度 JS 的可编辑文本就像普通链接一样

【英文标题】：Editable-Text with angular JS acts like a normal link

【发布时间】：2016-08-23 12:00:23

【问题描述】：

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

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

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

这是我的相关html代码

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

我正在插入 Angular js 控制器和所有东西，我没有收到任何错误，只是它就像一个正常的链接。

编辑我的 app.js 看起来像

'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';
........

    ]);

还有我的控制器：

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



...



]);

最后是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>

我试图同时设置最大值并保持具体

【问题讨论】：

请提供更多代码。用目前的代码，我们找不到问题。

Jordumus 我编辑了帖子，请看一下，提前谢谢你

请贴出我们所有的角码和html码。

抱歉 sebenalern 我没明白你的意思，如果你的意思是从 vitalets.github.io/angular-xeditable 下载的 angular-xeditable/xeditable.js（css 也是）我没有修改它我保留它是

您在 html 中包含了这个？ <link href="angular-xeditable/css/xeditable.css" rel="stylesheet"> <script src="angular-xeditable/js/xeditable.js"></script>?

【参考方案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

【讨论】：

你是对的 Sampath，我发现问题出在我实现它的表单本身，当我在它工作的表单之外尝试它时，但一旦在表单中它仍然不知道我如何解决这个问题 PS：我使用 angular 1.5.0

为什么你不能把所有的顾虑都放在 Fiddle 上？那我们可以帮助你吗？有一件事，这是一个很容易解决的问题。

我不得不说我有义务将表单用于其他约束，我试图用你给我的小提琴中的表单标签包围 div 并且它有效我不知道它是奇怪的

我会的，我会因为资源很多而推迟，只是有点懒，我会在几分钟内给你

Okey Simpath 非常感谢您的耐心等待，您将无法提供更多帮助