AngularJS指令：如何鏈接模板與動作和傳入模型？

我想建立一個自定義指令 - 並有兩個問題。看看下面的模板......AngularJS指令：如何鏈接模板與動作和傳入模型？

restrict: 'A', 
require: '?ngModel', 
template: '<div>' + 
       '<button style="width:30px" data-ng-click="clickOnInput()">+</button>' + 
       '<button style="width:30px" data-ng-click="emptyInput()">-</button>' + 
       '<a style="cursor:pointer; text-decoration:underline; width:120px; max-width:120px" ' + 
       ' data-ng-click="download()">{{model.inpFilename}}</a>' + 
       '<input id="btnF" style="position:absolute; opacity:0; top:0px; right:0px" ' + 
       '  type="file" data-ng-model="model.fileUpload" data-np-filereader/>' + 
      '</div>', 
scope: true, 
link: function(scope, element, attrs, ngModel) { 
    if(!ngModel) return; 

    $scope.clickOnInput = function() { 
     $('#btnF').click(); 
    } 
    ...

問題1：

該指令需要調用功能 - 將在從控制模板裏面的一些事件觸發功能。例如，這兩個按鈕應該調用特定的作用域memberCallback（clickOnInput，emptyInput）。我明白我可以通過使用「scope：true」爲這類成員創建一個新的範圍 - 並且由於該指令可能會在HTML partials中多次使用，因此會爲每次使用生成許多這樣的「人造」範圍我的指示。到現在爲止還挺好。

但是，這些回調的主體需要在模板本身的元素上工作。在這個例子中，你可以看到有一個id爲'btnF'的輸入控件，我寫的原始代碼（使用普通代碼，沒有指令）使用jQuery來「點擊」它，通過$（'＃btnF' ）。點擊（）。

當輸入成爲指令模板的一部分時，我該如何處理這個問題？這個指令在單個部分內可能有很多實例，所以我需要分開的ID ...我想我可以自己創建人工ID（'id'+ someGlobalCounter ++），並且可以在模板實現時將其注入（即每當'link'函數被調用），但肯定有更好的方法？

問題2：

類似地，模板中包含bindinds變量（例如，「{{model.inpFilename}}」）。我想要的是通過一個指令參數傳遞這種變量，並讓它們自動出現在指令實現的模板中。爲了解釋我的意思，想象在年底，HTML部分會說...

<div magic-directive-model="model.inpFilename1"> 
<div magic-directive-model="model.inpFilename2">

...而這些div將被指令的模板更換 - 改變{{model.inpFilename}}內該模板適用於指令調用正在使用的任何內容（即，上面的兩行將顯示模板的兩個「實例」，每個內部將使用傳遞的magic-directive-model內容而不是'model.inpFilename'。

是什麼，我試圖做可能與AngularJS指令，或者我已經走得太遠？

編輯：

我創建了一個plunker：

http://plnkr.co/edit/9qcKW5A6yq1hS8OuWTNK?p=preview

...並已顯著向前推進與此有關。我差不多完成了，除了一件事：即使清除按鈕（' - '）清除了綁定模型，並且更改傳播到了HTML部分（即清除了{{model.filename}}），但同樣的對於添加文件按鈕（'+'）不會發生 - 即使模型已更新，主頁面也不會。不僅如此，但如果你點擊了'+'按鈕，那麼隨着對話框打開，主頁面會更新，但Chrome會記錄一個異常：「錯誤：嘗試使用一個不可用或不再可用的對象「 - 而Firefox也記錄類型爲」SecurityError「的」DOM異常「。

任何想法爲什麼？

來源

2013-10-08 angularJsNewbie

我在plunkr中有一個錯字 - 我在模板本身內部使用了一個ng模型來處理filedata（這不是我的意圖，它是以前嘗試的剩餘部分）。刪除data-ng-model =「model.filedata」修復了這個問題。

來源

2013-10-09 13:21:46 angularJsNewbie

AngularJS指令：如何鏈接模板與動作和傳入模型？

回答

相關問題