Angular.js：選擇根據條件

Question

預編譯模板[免責聲明：我剛剛在我身後有幾個角周]

在角應用程序，我試着寫，我需要顯示一些信息並讓用戶編輯它，只要他們激活了一個開關。相應的HTML是：

<span ng-hide="editing" class="uneditable-input" ng:bind='value'> 
    </span> 
    <input ng-show="editing" type="text" name="desc" ng:model='value' value={{value}}> 

其中editing是布爾（通過開關設置）和value模型。

我想這是一種情況指令是專爲和我一直在嘗試實施一種情況。這個想法是預編譯<span>和<input>元素，然後根據editing布爾值的值選擇顯示哪一個。這是我到目前爲止有：

angular.module('mod', []) 
.controller('BaseController', 
    function ($scope) { 
    $scope.value = 0; 
    $scope.editing = true; 
    }) 
.directive('toggleEdit', 
    function($compile) { 
    var compiler = function(scope, element, attrs) { 
     scope.$watch("editflag", function(){ 
      var content = ''; 
      if (scope.editflag) { 
       var options='type="' + (attrs.type || "text")+'"'; 
       if (attrs.min) options += ' min='+attrs.min; 
       options += ' ng:model="' + attrs.ngModel 
          +'" value={{' + attrs.ngModel +'}}'; 
       content = '<input '+ options +'></input>'; 
      } else { 
       content = '<span class="uneditable-input" ng:bind="'+attrs.ngModel+'"></span>'; 
      }; 
      console.log("compile.editing:" + scope.editflag); 
      console.log("compile.attrs:" + angular.toJson(attrs)); 
      console.log("compile.content:" + content); 
      }) 
    }; 
    return { 
     require:'ngModel', 
     restrict: 'E', 
     replace: true, 
     transclude: true, 
     scope: { 
      editflag:'=' 
      }, 
     link: compiler 
    } 
}); 

（全HTML + JS可here）。

現在，指令不會執行任何操作，只能在控制檯上輸出一些消息。如何將我的html的<toggle-edit ...>元素替換爲我在指令中定義的content？如果我正確理解了文檔，我應該在鏈接之前編譯content：這應該是指令compile的preLink方法，對吧？但是，我如何在實踐中實施它？

---

獎金的問題：我希望能夠利用這個<toggle-edit>元素與一些選項，比如：

<toggle-edit type="text" ...></toggle-edit> 
<toggle-edit type="number" min=0 max=1 step=0.01></toggle-edit> 

我能上的各種選項的存在增加測試（像我在上面的例子中爲min做過），但是我想知道是否有更聰明的方法，比如在定義模板時一次性將所有attrs但ngModel和editflag一起放入？

感謝您的任何見解。

Answer 1

這是John Lindquist的一個教程，演示如何做你想做的事。 http://www.youtube.com/watch?v=nKJDHnXaKTY

這裏是他的代碼：

angular.module('myApp', []) 
.directive('jlMarkdown', function() { 
    var converter = new Showdown.converter(); 
    var editTemplate = '<textarea ng-show="isEditMode" ng-dblclick="switchToPreview()" rows="10" cols="10" ng-model="markdown"></textarea>'; 
    var previewTemplate = '<div ng-hide="isEditMode" ng-dblclick="switchToEdit()">Preview</div>'; 
    return{ 
     restrict:'E', 
     scope:{}, 
     compile:function (tElement, tAttrs, transclude) { 
      var markdown = tElement.text(); 

      tElement.html(editTemplate); 
      var previewElement = angular.element(previewTemplate); 
      tElement.append(previewElement); 

      return function (scope, element, attrs) { 
       scope.isEditMode = true; 
       scope.markdown = markdown; 

       scope.switchToPreview = function() { 
        var makeHtml = converter.makeHtml(scope.markdown); 
        previewElement.html(makeHtml); 
        scope.isEditMode = false; 
       } 
       scope.switchToEdit = function() { 
        scope.isEditMode = true; 
       } 
      } 
     } 
    } 
}); 

你可以看到它在這裏工作：http://jsfiddle.net/moderndegree/cRXr6/