angularjs – 在ngtemplate中对模型进行别名化

发布时间：2020-12-17 18:07:25 所属栏目：安全来源：网络整理

导读：我希望为模板中使用的模型添加别名,以便可以为不同的模型重用相同的模板.例如,在以下模型中： member = { name: "Member1",children:[ { name:"Child1" },{ name:"Child2" } ]} “成员”和“儿童”都有“名称”属性.所以我希望创建一个操作这个“name”属性

我希望为模板中使用的模型添加别名,以便可以为不同的模型重用相同的模板.例如,在以下模型中：

member = {

    name: "Member1",children:[
    {
        name:"Child1"
    },{
        name:"Child2"
    }
    ]
}

“成员”和“儿童”都有“名称”属性.所以我希望创建一个操作这个“name”属性的模板.
在这个问题的帮助下我能够做到这一点：

Bind ngInclude to different models

按照建议,我创建了一个指令,例如：

app.directive('member',function(){
return {
    restrict: 'A',template: "{{prefix}}<input type='text' ng-model='member.name'>",scope: {
        member: "="
    }
};
});

以下是该指令的用法：

<div ng-controller="MemberCtrl">
    {{member | json}}
    <div member="member"></div>
    <div member="member.children[0]"></div>
</div>

我能够实现模板重用,但是因为我在我的指令中使用“scope”,所以创建了一个隔离的范围,它无法访问控制器范围的任何属性.所以对于控制器：

app.controller('MemberCtrl',function($scope){
$scope.member = {

    name: "Member1",{
        name:"Child2"
    }
    ]
};

    $scope.prefix = "Mr.";
});

指令内的模板无法访问“prefix”属性.以下是jsfiddle：

http://jsfiddle.net/vaibhavgupta007/mVBaC/1/

这可能是什么问题？

编辑

我也可以使用$parent来访问前缀.但这是干净的方法吗？

解决方法

只需在指令定义对象中将’prefix’定义为隔离范围变量,并在元素属性中引用它.

app.directive('member',scope: {
        member: "=",prefix: "="
    }
};
});

<div ng-controller="MemberCtrl">
    {{member | json}}
    <div member="member" prefix="prefix"></div>
    <div member="member.children[0]" prefix="prefix"></div>
</div>

Fiddle

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!