Question

如果正在处理此表单，则可以更改项目的名称和邮件。但当我看到这个链接https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#services时，我看到我在风格上犯了一些错误，但现在它不再起作用了。

实际上我真的不知道为什么。它显示{{vm.name}}和{{vm.email}}但不显示名称，也不显示单击编辑按钮时显示的输入和按钮。

这是来自plunker https://embed.plnkr.co/yqUsSkwNBPBfOQS5jm5l/的链接。

angular
    .module("form",[])
    .controller("LocationFormCtrl", LocationFormCtrl);
    
    function LocationFormCtrl(){
      var vm = this;
      
      vm.name = 'henk';
      vm.mail = 'gmail';
      vm.editorEnabled = false;
      
      var service = {
        name: name,
        mail : mail,
        enableEditor : enableEditor,
        editorEnabled: editorEnabled,
        disableEditor: disableEditor,
        save: save
      };
      
      return service;
      
      function enableEditor(){
        vm.editorEnabled = true;
        vm.editName = vm.name;
        vm.editMail = vm.email;
      }
      
      function save(){
        vm.name = vm.editName;
        vm.email = vm.editMail;
        disableEditor();
      }
      
      function disableEditor(){
        vm.editorEnabled = false;
      }
      
    }

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body ng-app="form" ng-controller="LocationFormCtrl">
    
    <div ng-hide="editorEnabled">
      {{ vm.name }}
      {{ vm.email }}
        <div ng-click="enableEditor()" style="border-radius:50%; background-color:black; height:35px; width:35px;">
          <i class="fa fa-pencil-square-o" aria-hidden="true" style="color:white;margin-left:11px; margin-top:10px;"></i>
        </div>
    </div>
    
    <div ng-show="editorEnabled">
      <label>Name:</label>
         <input type="text" ng-model="vm.editName" ng-show="editorEnabled">
        <br><br>
      <label>Email:</label>
        <input type="text" ng-model="vm.editMail" ng-show="editorEnabled">
      <div ng-click="save()" style="border-radius:50%; background-color:black; height:35px;width:35px;"  >
        <i class="fa fa-floppy-o" aria-hidden="true" style="color:white; margin-left:11px; margin-top:10px;"></i>
      </div>
      <div ng-click="disableEditor()" style="border-radius:50%; background-color:black;height:35px; width:35px;">
        <i class="fa fa-ban" aria-hidden="true" style="color:white; margin-left:11px; margin-top:10px;"></i>
      </div>
    </div>
  </body>
</html>

Answer 1

使用角度控制器的this语法来避免$scope，或者只使用$scope。

我更正了您的plunker，您必须在as中使用html view语法，并将所有数据绑定到控制器中的this对象。请注意以下积分：

ng-controller="LocationFormCtrl as vm"
在html中将所有内容绑定到vm，例如ng-click="vm.save()"。
在控制器中将所有内容绑定到this或其别名..例如vm.enableEditor = function (){/\\

并且如果您想以$scope方式执行此操作，请参阅此$sope Plunker

Answer 2

因为你可以看到，参考ng-controller中的控制器，它的约翰爸爸结构。

有关详细信息，请查看。

https://github.com/johnpapa/angular-styleguide

Angularjs编辑并保存

2 个答案: