如何使用變量將對象鍵傳遞給Angular指令？

我使用Code Mirror指令將文本區域設置爲代碼格式。如何使用變量將對象鍵傳遞給Angular指令？

什麼是工作：

<textarea ui-codemirror type="textarea" ng-model="x"></textarea>

您可以設置選項像這樣

<textarea ui-codemirror="editorOptions" type="textarea" ng-model="x"></textarea>

，並在你的控制器：

$scope.editorOptions = { 
      name: 'javascript', 
      json: true, 
      smartIndent: false, 
      tabSize: 2, 
      lineWrapping : true, 
      lineNumbers: true, 
      mode: 'javascript' 
     }

什麼不工作：

我想動態更改基於模型的另一部分（我支持JavaScript和Markdown）的editorOptions。在HTML

$scope.editorOptions = { 
     json: { 
      name: 'javascript', 
      json: true, 
      smartIndent: false, 
      tabSize: 2, 
      lineWrapping : true, 
      lineNumbers: true, 
      mode: 'javascript' 
     }, 
     markdown: { 
      name: 'markdown', 
      json: false, 
      smartIndent: false, 
      tabSize: 2, 
      lineWrapping : true, 
      lineNumbers: true, 
      mode: 'markdown' 
     } 
    };

然後將此：

所以我想這個

<select ng-model='editorType' required ng-options='option.value as option.name for option in editorTypes'></select> 
<textarea ui-codemirror="editorOptions[editorType]" type="textarea" ng-model="x"></textarea>

我的問題是 - 如何使用選擇模型（editorType），它的值指定在代碼鏡像指令中使用哪些選項對象？

我已經試過

<textarea ui-codemirror="editorOptions.[editorType]" type="textarea" ng-model="x"></textarea> 
<textarea ui-codemirror="editorOptions[$scope.editorType]" type="textarea" ng-model="x"></textarea>

都無濟於事。

任何人都知道正確的方法是什麼？

很多，非常感謝！

更新我相信這是正確的語法：

ui-codemirror="editorOptions[editorType]".

我認爲這是與指令不實現該變量的一個問題發生了變化。

來源

2013-07-17 Hairgami_Master

可以ü分享您的提琴或plunker演示 –

我相信問題可能是指令是不知道的是，$ scope.editorType變量發生了變化。 –

@Hairgami_Master我認爲你很可能咆哮正確的嘗試，祝你好運。 – shaunhusain

我不認爲這會爲你工作，而不分叉ui-codemirror。 UI-codemirror中的代碼在開始時會執行opts = angular.extend({}, options, scope.$eval(attrs.uiCodemirror));，但它不會監視更新。

如果從分叉UI-codemirror：https://github.com/angular-ui/ui-codemirror/blob/master/ui-codemirror.js然後補上一句

attrs.$observe('uiCodemirror', function (newVal, oldVal) { 
    if (newVal !== oldVal) { 
    opts = angular.extend({}, options, scope.$eval(attrs.uiCodemirror)); 
    codeMirror = CodeMirror.fromTextArea(elm[0], opts); //or maybe $timeout(deferredCodemirror) ?? 
    } 
});

然後它可能工作，但我沒有測試過，所以我不知道它是否真的會工作。也許這會給你一個如何創建你需要的指令的想法。

另一個可能會更重的選擇是實例化兩個代碼鏡並在兩個代碼鏡之間切換......但我真的不太喜歡這個選項。

來源

2013-07-17 19:54:53

謝謝，我仔細查看了代碼，並試圖瞭解它是如何工作的。我不知道有足夠的指令可以將您提到的那一行更改爲雙向綁定，而不是現在的init樣式值。現在我已經編碼了，但是更喜歡更優雅的方法。乾杯! –

您不會「更改」該行，只需稍後添加一個手錶即可重新初始化CodeMirror。我發佈的這些技巧將檢查ui-codemirror屬性是否更改，然後重新運行CodeMirror構造函數。 –

謝謝喬納森 - 我的駭人聽聞正是你的想法 - 兩個代碼鏡像。當我有一分鐘呼吸時，我會嘗試你的技術。非常感謝。如果CodeMirror中的某個人發生問題，現在就不會回覆它。 –

添加到喬納森的回覆：

attrs.$observe('uiCodemirror', function (newVal, oldVal) 
{ 
    if(newVal !== oldVal) 
    { 
    opts = angular.extend({}, options, scope.$eval(attrs.uiCodemirror)); 
    var keys = Object.keys(opts) 
    if(keys.length != 0) 
    { 
     keys.forEach(function(i) 
     { 
     var v = opts[i]; 
     codeMirror.setOption(i, v); 
     }); 

     $timeout(function() { codeMirror.refresh()}); 
    } 
    } 
});

來源

2014-02-06 05:30:46

如何使用變量將對象鍵傳遞給Angular指令？

回答

相關問題