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变量的值，然后根据变量值展示不同的区域就可以了