2013-10-17 84 views
1

編輯:事實證明,這實際上工作,它只是不顯示檢查器中的'模型'屬性後面的內容。我沒有注意到它,因爲我沒有使用特定數據點的內容。 Facepalm感謝所有的幫助。調用僞指令屬性作爲嵌套僞指令屬性值

所以我試圖通過創建一個相當詳細的嵌套指令結構來使我的表單結構更簡單。我使用相當基本的角碼來實現這一點,但出於某種原因,使用來自父項的屬性作爲子指令屬性的值不起作用(下面的代碼解釋,必須改變一些專有的詞,但它本質上一樣)。我究竟做錯了什麼?

父HTML指令電話:

<field-label project-for="projectName" project-model="data.product.projectName">Project Name</field-label> 

指令代碼:

app.directive("fieldLabel", function() { 
    return { 
    restrict: "E", 
    transclude: true, 
    scope: { model: '=projectModel', for: '@projectFor' }, 
    templateUrl: 'views/products/label.html', 
    }; 
}); 

編輯:根據要求,在使用其他指令這裏:

app.directive("projectOtherView", function() { 
    return { 
    restrict: "E", 
    scope: { field: '=projectOtherViewModel' }, 
    templateUrl: 'views/products/XXX.html', 
    }; 
}); 

模板HTML

<div class="col-sm-2 text-right"> 
    <label for="{{for}}" class="control-label" ng-transclude></label> 
    <project-other-view project-other-view-model="model"></project-other-view> 
</div> 

的「爲」工作正常,但「模型」只有通過本身,它應該不是(型號名稱我穿過開頭)。

+0

project-other-view的代碼是什麼? – fabrizioM

+0

我補充說,在雅。 – trudesign

+0

它工作正常。如果您的產品/ XXX.html包含{{field}},它將顯示data.product.projectName的內容。不要擔心它仍然被稱爲模型,這是正確的。請參閱http://plnkr.co/edit/MsAHkTU3KLXWhpplWAPs?p=preview – Stevo

回答

0

根據我的評論。事實上,它不顯示除你定義的內容以外的任何內容,在這種情況下,「模型」這個詞很好,但它仍然與父模型相連。因此,如果要將{{field}}表達式放入您的子模板中,則可以訪問模型中的雙向綁定。所以,你的模型層次結構看起來是這樣的:

level 1: data.product.projectName (binding to next level: project-model="data.product.projectName") 
    level 2: projectModel (binding to next level: model: '=projectModel') 
     level 3: model (binding to next level: project-other-view-model="model") 
      level 4: projectOtherViewModel (binding to next level: field: '=projectOtherViewModel') 

記住連字符被刪除和駝峯如此「項目模式」中一個模板變成「projectModel」在JavaScript。

查看http://plnkr.co/edit/MsAHkTU3KLXWhpplWAPs?p=preview作爲一個工作示例。

+1

這是答案,謝謝Stevo。只要我獲得15個代表,我就會讓你高興。 – trudesign

0

你可以創建一個jsfiddle來複制你的問題嗎?我有一種感覺,你的問題與this

+0

在小提琴上工作後,我會在稍後複製我的問題時將其鏈接。 (尷尬的承認,我從來沒有擺弄過*羞辱*)感謝您的鏈接,我會檢查出來。 – trudesign

+0

我不能讓那該死的小提琴工作。 – trudesign