5

我希望为模板中使用的模型起别名，以便可以为不同的模型重用相同的模板。例如在以下模型中：

member = {

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

“member”和“children”都具有“name”属性。所以我希望创建一个操纵这个“名称”属性的模板。在这个问题的帮助下，我能够做到这一点：

将 ngInclude 绑定到不同的模型

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

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>

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

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

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

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

指令内的模板无法访问“前缀”属性。以下是jsfiddle：

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

这可能是什么问题？

编辑

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

4

2 回答 2

1

只需在指令定义对象中将“前缀”定义为独立的范围变量，并在元素属性中引用它。

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

 

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

小提琴

于 2013-03-31T21:34:06.523 回答
0

为了能够将指令范围属性绑定到各种控制器属性（例如，member和member.children[0]）以在通用模板中使用，我相信您将需要使用隔离范围语法（正如您已经发现的那样）。

一旦你走上了“隔离范围之路”，你就必须指定你的指令需要访问的所有控制器属性和函数作为附加属性：

<div member="member" prefix="{{prefix}}" join-fn="joinNameWithPrefix(someName)"></div>

然后在你的指令中：

template: "{{prefix}}<input type='text' ng-model='member.name'>"
   + "<br>fn result={{ joinFn( {someName: member.name} ) }}",
scope: {
  member: "=",
  prefix: '@',
  joinFn: '&'
},

小提琴

用于=双向数据绑定、@单向字符串和&单向表达式。

于 2013-04-01T16:44:33.057 回答