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

问题描述

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

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

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

问题解答

给你个简单的例子吧：

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

其实这种在点击按钮的时候改变flag变量的值，然后根据变量值展示不同的区域就可以了