angular.js - angularjs directive怎麼實現透過點擊事件更換模版?

Question

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

用angular去實現的話,我目前的思路是,點擊編輯按鈕,顯示數據部分通過directive替換成可編輯狀態的模版,編輯之後點擊確定再進行模版的切換,不知道可不可以這樣

就是這樣兩個模版之間切換,不用路由是不是可以實現?

Answer 1

給你一個簡單的例子：

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

其實這種在點擊按鈕的時候改變flag變數的值，然後根據變數值展示不同的區域就可以了