angular.js - How does the angularjs directive change templates through click events?

Question

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

If I use Angular to implement it, my current idea is to click the edit button and replace the displayed data part with an editable template through directive. After editing, click OK and then switch the template. I don’t know if this is possible

This is how to switch between two templates. Is it possible to achieve it without routing?

Answer 1

Let me give you a simple example:

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

In fact, this is just to change the value of the flag variable when the button is clicked, and then display different areas according to the variable value