2013-10-17 82 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