問(wèn)題描述

想實(shí)現(xiàn)這樣一個(gè)功能:點(diǎn)擊頁(yè)面的編輯按鈕 ,頁(yè)面的數(shù)據(jù)變成可編輯狀態(tài),編輯之后點(diǎn)擊確定,編輯的數(shù)據(jù)展示在頁(yè)面上

用angular去實(shí)現(xiàn)的話,我目前的思路是,點(diǎn)擊編輯按鈕,顯示數(shù)據(jù)部分通過(guò)directive替換成可編輯狀態(tài)的模版,編輯之后點(diǎn)擊確定再進(jìn)行模版的切換,不知道可不可以這樣

就是這樣兩個(gè)模版之間切換,不用路由是不是可以實(shí)現(xiàn)?

問(wèn)題解答

給你個(gè)簡(jiǎn)單的例子吧：

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

其實(shí)這種在點(diǎn)擊按鈕的時(shí)候改變flag變量的值，然后根據(jù)變量值展示不同的區(qū)域就可以了