angulaire.js - Comment la directive angulaire JS modifie-t-elle les modèles via des événements de clic ?

Question

想实现这样一个功能:
点击页面的编辑按钮 ,页面的数据变成可编辑状态,编辑之后点击确定,编辑的数据展示在页面上

Si j'utilise Angular pour l'implémenter, mon idée actuelle est de cliquer sur le bouton Modifier et de remplacer la partie de données affichée par un modèle modifiable via une directive. Après l'édition, cliquez sur OK, puis changez de modèle. c'est possible

Voici comment basculer entre deux modèles Est-il possible d'y parvenir sans routage ?

Answer 1

Laissez-moi vous donner un exemple simple :

var demo = angular.module('demo', []);

demo.directive('demoDir', function(){
  return {
      restrict: 'A',
      scope: {},
      link: function($scope, element){
        $scope.city = {};
        
        $scope.edit = function(){
          $scope.isEditing = true;
        };
        
        $scope.confirm = function(){
          $scope.isEditing = false;
        };

      },
      template: '<p ng-if="!isEditing">城市: {{ city.name }} <button ng-click="edit()">编辑</button></p><p ng-if="isEditing"><input ng-model="city.name"/><button ng-click="confirm()">确定</button></p>'
  };
});

plunker

Answer 2

En fait, cette méthode permet de changer la valeur de la variable flag lorsque l'on clique sur le bouton, puis d'afficher différentes zones en fonction de la valeur de la variable