angular.js - angularjs directive怎么实现通过点击事件更换模版?-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

angular.js - angularjs directive怎么实现通过点击事件更换模版?

PHPz 2017-05-15 16:55:03

[AngularJS讨论组]

758

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

用angular去实现的话,我目前的思路是,点击编辑按钮,显示数据部分通过directive替换成可编辑状态的模版,编辑之后点击确定再进行模版的切换,不知道可不可以这样

就是这样两个模版之间切换,不用路由是不是可以实现?

PHPz

学习是最好的投资！

全部回复(2)

ringa_lee2017-05-15 16:57:03 2楼

给你个简单的例子吧：

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